@xfxstudio/claworld 2026.7.9-testing.2 → 2026.7.9-testing.3

package/README.md

@@ -42,7 +42,7 @@ Staging validation pins an exact testing package from the runtime manifest.
 The current testing lane is:
 
 ```bash
-openclaw plugins install @xfxstudio/claworld@2026.7.9-testing.2
+openclaw plugins install @xfxstudio/claworld@2026.7.9-testing.3
 ```
 
 Testing packages default to `https://staging.claworld.love`; stable packages

package/openclaw.plugin.json

@@ -18,7 +18,7 @@
   },
   "name": "Claworld Persona Relay",
   "description": "Claworld relay world channel plugin for OpenClaw.",
-  "version": "2026.7.9-testing.2",
+  "version": "2026.7.9-testing.3",
   "configSchema": {
     "type": "object",
     "additionalProperties": false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfxstudio/claworld",
-  "version": "2026.7.9-testing.2",
+  "version": "2026.7.9-testing.3",
   "description": "Claworld channel plugin for OpenClaw",
   "type": "module",
   "main": "index.js",

package/src/openclaw/runtime/transcript-report.js

@@ -31,6 +31,82 @@ const MANUAL_MESSAGE_FIELDS = new Set(['from', 'text', 'createdAt']);
 const TIME_SPLIT_SECONDS = 5 * 60;
 const SEGMENT_GAP_SECONDS = 4 * 60 * 60;
 const ARTIFACT_SCHEMA = 'claworld.transcript_report.v1';
+const CANVAS_MARGIN = 24;
+const FRAME_MARGIN = 16;
+const HEADER_Y = 48;
+const HEADER_CARD_HEIGHT_ONE_LINE = 92;
+const HEADER_CARD_HEIGHT_TWO_LINES = 110;
+const HEADER_BOTTOM_PAD = 20;
+const BODY_TOP_GAP = 24;
+const PAGE_BOTTOM = 54;
+const ITEM_GAP = 22;
+const TIME_ROW_HEIGHT = 42;
+const ELLIPSIS_HEIGHT = 34;
+const BUBBLE_PAD_X = 32;
+const BUBBLE_PAD_Y = 22;
+const LABEL_HEIGHT = 30;
+const LABEL_OVERLAP = 18;
+const LABEL_RAISE = 9;
+const LABEL_MAX_COLS = 14;
+const BUBBLE_MAX_RATIO = 0.64;
+const BUBBLE_MIN_WIDTH = 200;
+const FONT_SIZE = 18;
+const SMALL_FONT_SIZE = 12;
+const LABEL_FONT_SIZE = 15;
+const TITLE_FONT_SIZE = 34;
+const LINE_HEIGHT = 29;
+const HEADER_SUBTITLE_MAX_UNITS = 33;
+const HEADER_SUBTITLE_MAX_LINES = 2;
+const HEADER_SUBTITLE_LINE_HEIGHT = 19;
+const TAG_HEIGHT = 58;
+const TAG_ICON_SIZE = 30;
+const TAG_ICON_GAP = 12;
+const TAG_ICON_TOP_GAP = 8;
+const TAG_FALLBACK_MAX_COLS = 10;
+const TEXT_UNIT_PX = 18;
+const BLACK = '#090909';
+const COMIC_THEME = Object.freeze({
+  paper: '#FBF8EF',
+  paperWarm: '#FFFDF7',
+  headerFill: '#FEF5D8',
+  gridMinor: '#BED1D8',
+  gridMajor: '#AABFC8',
+  ink: BLACK,
+  muted: '#222222',
+  leftFill: '#EFFFF5',
+  leftLabel: '#62E69D',
+  leftAccentA: '#58E58F',
+  leftAccentB: '#47B6FF',
+  rightFill: '#EFE0FF',
+  rightLabel: '#B785FF',
+  rightAccentA: '#A871FF',
+  rightAccentB: '#FF4EB4',
+  timeFill: '#FFFDF7',
+  timeAccentLeft: '#FF62DE',
+  timeAccentRight: '#50D995',
+});
+const TAG_ICON_THEMES = Object.freeze({
+  like: ['#D8F4FF', '#58B7FF'],
+  dislike: ['#FFE0EA', '#FF6A9A'],
+  'request end': ['#FFF0A8', '#FF9F2F'],
+});
+const COMIC_FONT_FAMILY = [
+  "'PingFang SC'",
+  "'Hiragino Sans GB'",
+  "'Microsoft YaHei'",
+  "'WenQuanYi Zen Hei'",
+  "'Noto Sans CJK SC'",
+  "'Noto Sans SC'",
+  "'Source Han Sans SC'",
+  "'IPA P Gothic'",
+  "'AR PL UMing CN'",
+  "'Arial Unicode MS'",
+  '-apple-system',
+  'BlinkMacSystemFont',
+  "'Segoe UI'",
+  'Arial',
+  'sans-serif',
+].join(', ');
 
 function isObject(value) {
   return value && typeof value === 'object' && !Array.isArray(value);
@@ -294,15 +370,40 @@ function normalizeTagLabel(value) {
 }
 
 function extractControlTags(text) {
+  const source = String(text || '');
+  const matches = [];
+  const claimedSpans = [];
   const tags = [];
-  const cleaned = String(text || '').replace(/\[\[([a-zA-Z0-9_\-\s]+)\]\]|\[([a-zA-Z0-9_\-\s]+)\]/g, (match, doubleTag, singleTag) => {
-    const label = normalizeTagLabel(doubleTag || singleTag);
-    if (label) tags.push(label);
-    return '';
-  });
+  const record = (start, end, label) => {
+    if (!label) return;
+    if (claimedSpans.some(([claimedStart, claimedEnd]) => start < claimedEnd && end > claimedStart)) return;
+    matches.push([start, end, label]);
+    claimedSpans.push([start, end]);
+  };
+  const controlPatterns = [
+    { pattern: /\[\[?\s*request[_\s-]*(?:conversation[_\s-]*)?end\s*\]?\]?/gi, label: 'request end' },
+    { pattern: /\[\s*requeset\s+end\s*\]/gi, label: 'request end' },
+    { pattern: /\[\[?\s*end\s*\]?\]?/gi, label: 'request end' },
+    { pattern: /\[\[?\s*like\s*\]?\]?/gi, label: 'like' },
+    { pattern: /\[\[?\s*dislike\s*\]?\]?/gi, label: 'dislike' },
+  ];
+  for (const { pattern, label } of controlPatterns) {
+    for (const match of source.matchAll(pattern)) record(match.index, match.index + match[0].length, label);
+  }
+  for (const match of source.matchAll(/\[\[\s*([A-Za-z0-9][A-Za-z0-9 _-]{0,24})\s*\]\]/g)) {
+    record(match.index, match.index + match[0].length, normalizeTagLabel(match[1]));
+  }
+  let cleaned = '';
+  let cursor = 0;
+  for (const [start, end, label] of matches.sort((left, right) => left[0] - right[0])) {
+    cleaned += source.slice(cursor, start);
+    cursor = Math.max(cursor, end);
+    if (!tags.includes(label)) tags.push(label);
+  }
+  cleaned += source.slice(cursor);
   return {
     text: cleaned.replace(/[ \t]+\n/g, '\n').replace(/\n{3,}/g, '\n\n').trim(),
-    tags: [...new Set(tags)],
+    tags,
   };
 }
 
@@ -683,64 +784,165 @@ function normalizeHeaderContext({ mode, manual = null, source = null, messages =
   };
 }
 
+function isWideChar(char) {
+  const code = char.codePointAt(0) || 0;
+  return (
+    (code >= 0x1100 && code <= 0x115f)
+    || code === 0x2329
+    || code === 0x232a
+    || (code >= 0x2e80 && code <= 0xa4cf)
+    || (code >= 0xac00 && code <= 0xd7a3)
+    || (code >= 0xf900 && code <= 0xfaff)
+    || (code >= 0xfe10 && code <= 0xfe19)
+    || (code >= 0xfe30 && code <= 0xfe6f)
+    || (code >= 0xff00 && code <= 0xff60)
+    || (code >= 0xffe0 && code <= 0xffe6)
+    || (code >= 0x1f300 && code <= 0x1faff)
+    || (code >= 0x20000 && code <= 0x3fffd)
+  );
+}
+
+function charColumns(char) {
+  if (char === '\n') return 0;
+  return isWideChar(char) ? 2 : 1;
+}
+
 function displayColumns(text) {
   let columns = 0;
-  for (const char of String(text || '')) {
-    const code = char.codePointAt(0);
-    columns += code > 0x2e80 ? 2 : 1;
-  }
+  for (const char of String(text || '')) columns += charColumns(char);
   return columns;
 }
 
-function wrapText(text, maxColumns) {
-  const source = String(text || '').replace(/\r/g, '').split('\n');
-  const lines = [];
-  const pushHardWrappedToken = (token) => {
-    let current = '';
-    let columns = 0;
-    for (const char of String(token || '')) {
-      const charColumns = displayColumns(char);
-      if (current && columns + charColumns > maxColumns) {
-        lines.push(current);
-        current = '';
-        columns = 0;
-      }
-      current += char;
-      columns += charColumns;
+function clipDisplay(text, maxColumns) {
+  const value = String(text || '');
+  if (displayColumns(value) <= maxColumns) return value;
+  const suffix = '...';
+  const target = Math.max(0, maxColumns - suffix.length);
+  let kept = '';
+  let used = 0;
+  for (const char of value) {
+    const columns = charColumns(char);
+    if (used + columns > target) break;
+    kept += char;
+    used += columns;
+  }
+  return `${kept.trimEnd()}${suffix}`;
+}
+
+function charUnits(char) {
+  if (char === '\n') return 0;
+  if (/\s/u.test(char)) return 0.35;
+  return isWideChar(char) ? 1 : 0.55;
+}
+
+function textUnits(text) {
+  let units = 0;
+  for (const char of String(text || '')) units += charUnits(char);
+  return units;
+}
+
+function ellipsizeText(text, maxUnits, { suffix = '...' } = {}) {
+  const value = String(text || '');
+  if (textUnits(value) <= maxUnits) return value;
+  const allowed = Math.max(0, maxUnits - textUnits(suffix));
+  let kept = '';
+  let used = 0;
+  for (const char of value) {
+    const units = charUnits(char);
+    if (used + units > allowed) break;
+    kept += char;
+    used += units;
+  }
+  return `${kept.trimEnd()}${suffix}`;
+}
+
+function wrapTokens(paragraph) {
+  const tokens = [];
+  let current = '';
+  const flush = () => {
+    if (current) {
+      tokens.push(current);
+      current = '';
     }
-    if (current) lines.push(current);
   };
-  for (const paragraph of source) {
+  for (const char of String(paragraph || '')) {
+    if (/\s/u.test(char)) {
+      flush();
+      tokens.push(' ');
+    } else if (isWideChar(char)) {
+      flush();
+      tokens.push(char);
+    } else {
+      current += char;
+    }
+  }
+  flush();
+  return tokens;
+}
+
+function wrapText(text, maxUnits) {
+  const lines = [];
+  const paragraphs = String(text || '').replace(/\r/g, '').split('\n');
+  for (const paragraph of paragraphs.length ? paragraphs : ['']) {
     let current = '';
-    let columns = 0;
-    const words = paragraph.includes(' ') ? paragraph.split(/(\s+)/) : [...paragraph];
-    for (const word of words) {
-      const wordColumns = displayColumns(word);
-      if (!/^\s+$/.test(word) && wordColumns > maxColumns) {
-        if (current) {
-          lines.push(current.trimEnd());
-          current = '';
-          columns = 0;
+    let currentUnits = 0;
+    let paragraphHasLine = false;
+    for (const token of wrapTokens(paragraph)) {
+      const tokenUnits = textUnits(token);
+      if (/^\s+$/u.test(token)) {
+        if (current && currentUnits + tokenUnits <= maxUnits) {
+          current += token;
+          currentUnits += tokenUnits;
         }
-        pushHardWrappedToken(word);
         continue;
       }
-      if (current && columns + wordColumns > maxColumns) {
+      if (current && currentUnits + tokenUnits > maxUnits) {
         lines.push(current.trimEnd());
+        paragraphHasLine = true;
         current = '';
-        columns = 0;
+        currentUnits = 0;
+      }
+      if (tokenUnits > maxUnits) {
+        for (const char of token) {
+          const units = charUnits(char);
+          if (current && currentUnits + units > maxUnits) {
+            lines.push(current.trimEnd());
+            paragraphHasLine = true;
+            current = '';
+            currentUnits = 0;
+          }
+          current += char;
+          currentUnits += units;
+        }
+      } else {
+        current += token;
+        currentUnits += tokenUnits;
       }
-      current += word;
-      columns += wordColumns;
     }
-    if (current) lines.push(current.trimEnd());
-    if (!paragraph) lines.push('');
+    if (current || !paragraphHasLine) lines.push(current.trimEnd());
   }
   return lines.length > 0 ? lines : [''];
 }
 
+function formatCompactTimestamp(value) {
+  const ms = parseTimestampMs(value);
+  if (ms) {
+    const date = new Date(ms);
+    const pad = (part) => String(part).padStart(2, '0');
+    return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  }
+  const text = String(value || '').trim();
+  const match = text.match(/(?:(\d{4})[-/])?(\d{1,2})[-/](\d{1,2})[ T](\d{1,2}):(\d{2})/);
+  if (match) {
+    return `${String(Number(match[2])).padStart(2, '0')}-${String(Number(match[3])).padStart(2, '0')} ${String(Number(match[4])).padStart(2, '0')}:${match[5]}`;
+  }
+  return '';
+}
+
 function timeLabelForMessage(message) {
-  return message.createdAtLabel || formatTimestampLabel(message.createdAt);
+  return formatCompactTimestamp(message.createdAt || message.timestampMs || message.createdAtLabel)
+    || message.createdAtLabel
+    || '';
 }
 
 function buildRenderItems(messages = []) {
@@ -765,76 +967,162 @@ function buildRenderItems(messages = []) {
   return items;
 }
 
-function estimateMessageLayout(message) {
-  const maxColumns = message.side === 'local' ? 36 : 36;
-  const lines = wrapText(message.text, maxColumns);
-  const tagRows = message.tags.length > 0 ? 1 : 0;
-  const textWidth = Math.min(
-    460,
-    Math.max(160, Math.max(...lines.map(displayColumns), 10) * 8.5 + 44),
+function renderSide(message = {}) {
+  return message.side === 'local' || message.side === 'right' || message.side === 'me'
+    ? 'right'
+    : 'left';
+}
+
+function participantLabel(message = {}, header = {}) {
+  if (renderSide(message) === 'right') return header.localLabel || 'You';
+  return message.speaker || header.peerLabel || 'Peer';
+}
+
+function messageTags(message = {}) {
+  return Array.isArray(message.tags) ? message.tags : [];
+}
+
+function measureRenderItem(item, width, header) {
+  const contentWidth = Math.max(270, Math.trunc(width * BUBBLE_MAX_RATIO));
+  if (item.kind === 'ellipsis') {
+    return {
+      kind: 'ellipsis',
+      message: null,
+      lines: [],
+      width: contentWidth,
+      height: ELLIPSIS_HEIGHT,
+      omittedCount: item.omitted || 0,
+      label: item.label || '',
+    };
+  }
+  if (item.kind === 'time') {
+    return {
+      kind: 'time',
+      message: null,
+      lines: [],
+      width: contentWidth,
+      height: TIME_ROW_HEIGHT,
+      label: item.label || '',
+    };
+  }
+
+  const side = renderSide(item.message);
+  const label = participantLabel(item.message, header);
+  const maxUnits = Math.max(18, (contentWidth - BUBBLE_PAD_X * 2) / TEXT_UNIT_PX);
+  const lines = wrapText(item.message.text, maxUnits);
+  const labelUnits = textUnits(labelText(label)) + 4;
+  const contentUnits = Math.max(
+    ...lines.map((line) => textUnits(line)),
+    tagRowUnits(messageTags(item.message)),
+    labelUnits,
+    10,
   );
-  const height = 24 + lines.length * 20 + tagRows * 25;
+  const bubbleWidth = Math.trunc(Math.min(
+    contentWidth,
+    Math.max(BUBBLE_MIN_WIDTH, contentUnits * TEXT_UNIT_PX + BUBBLE_PAD_X * 2),
+  ));
+  const textHeight = lines.length * LINE_HEIGHT;
+  const tagHeight = messageTags(item.message).length ? TAG_HEIGHT : 0;
+  const bubbleHeight = BUBBLE_PAD_Y * 2 + textHeight + tagHeight;
+  const rowHeight = LABEL_HEIGHT - LABEL_OVERLAP + bubbleHeight + 10;
   return {
+    kind: 'message',
+    message: item.message,
+    side,
+    participantLabel: label,
     lines,
-    width: textWidth,
-    height,
+    width: bubbleWidth,
+    height: rowHeight,
+    tagHeight,
+    textHeight,
   };
 }
 
 function layoutPages({ messages, header, maxPageHeight }) {
   const width = DEFAULT_WIDTH;
   const maxHeight = maxPageHeight || DEFAULT_MAX_PAGE_HEIGHT;
-  const margin = 32;
-  const headerHeight = 102;
-  const bottomMargin = 32;
-  const pages = [];
-  let page = {
-    page: 1,
-    width,
-    height: Math.min(maxHeight, Math.max(MIN_PAGE_HEIGHT, headerHeight + bottomMargin)),
-    elements: [],
-  };
-  let y = headerHeight;
+  const measuredItems = buildRenderItems(messages).map((item) => measureRenderItem(item, width, header));
+  const pageBuckets = [[]];
+  const headerHeight = headerHeightForSubtitle(header.subtitle);
+  let used = headerHeight + BODY_TOP_GAP + PAGE_BOTTOM;
+
+  measuredItems.forEach((item, index) => {
+    const itemHeight = item.height + ITEM_GAP;
+    let neededHeight = itemHeight;
+    if (item.kind === 'time' && index + 1 < measuredItems.length) {
+      neededHeight += measuredItems[index + 1].height + ITEM_GAP;
+    }
+    const currentPage = pageBuckets[pageBuckets.length - 1];
+    if (currentPage.length > 0 && used + neededHeight > maxHeight) {
+      pageBuckets.push([]);
+      used = headerHeight + BODY_TOP_GAP + PAGE_BOTTOM;
+    }
+    pageBuckets[pageBuckets.length - 1].push(item);
+    used += itemHeight;
+  });
 
-  const pushPage = () => {
-    page.height = Math.min(maxHeight, Math.max(MIN_PAGE_HEIGHT, Math.ceil(y + bottomMargin)));
-    pages.push(page);
-    page = {
-      page: pages.length + 1,
+  const pages = pageBuckets.map((pageItems, pageIndex) => {
+    let y = headerHeight + BODY_TOP_GAP;
+    const elements = [];
+    for (const item of pageItems) {
+      if (item.kind === 'ellipsis') {
+        elements.push({
+          kind: 'ellipsis',
+          y,
+          height: item.height,
+          label: item.label,
+        });
+        y += item.height + ITEM_GAP;
+        continue;
+      }
+      if (item.kind === 'time') {
+        elements.push({
+          kind: 'time',
+          y,
+          height: item.height,
+          label: item.label,
+        });
+        y += item.height + ITEM_GAP;
+        continue;
+      }
+      const label = labelText(item.participantLabel);
+      const position = positions(width, item.width, label, item.side);
+      const bubbleY = y + LABEL_HEIGHT - LABEL_OVERLAP;
+      const bubbleHeight = BUBBLE_PAD_Y * 2 + item.textHeight + item.tagHeight;
+      elements.push({
+        kind: 'message',
+        y,
+        x: position.bubbleX,
+        bubbleX: position.bubbleX,
+        bubbleY,
+        labelX: position.labelX,
+        labelY: y - LABEL_RAISE,
+        labelWidth: position.labelWidth,
+        label,
+        align: position.align,
+        width: item.width,
+        height: bubbleHeight,
+        bubbleHeight,
+        lines: item.lines,
+        message: item.message,
+        side: item.side,
+        participantLabel: item.participantLabel,
+        tagHeight: item.tagHeight,
+        textHeight: item.textHeight,
+      });
+      y += item.height + ITEM_GAP;
+    }
+    return {
+      page: pageIndex + 1,
       width,
-      height: MIN_PAGE_HEIGHT,
-      elements: [],
+      height: Math.max(520, Math.min(maxHeight, Math.ceil(y + PAGE_BOTTOM))),
+      elements,
+      title: header.title,
+      subtitle: header.subtitle,
+      footer: 'visit claworld.love',
     };
-    y = 82;
-  };
+  });
 
-  for (const item of buildRenderItems(messages)) {
-    if (item.kind === 'time') {
-      const height = 28;
-      if (y + height + bottomMargin > maxHeight && page.elements.length > 0) pushPage();
-      page.elements.push({ ...item, x: margin, y, width: width - margin * 2, height });
-      y += height;
-      continue;
-    }
-    const messageLayout = estimateMessageLayout(item.message);
-    const height = messageLayout.height + 10;
-    if (y + height + bottomMargin > maxHeight && page.elements.length > 0) pushPage();
-    const x = item.message.side === 'local'
-      ? width - margin - messageLayout.width
-      : margin;
-    page.elements.push({
-      kind: 'message',
-      message: item.message,
-      layout: messageLayout,
-      x,
-      y,
-      width: messageLayout.width,
-      height: messageLayout.height,
-    });
-    y += height;
-  }
-  page.height = Math.min(maxHeight, Math.max(MIN_PAGE_HEIGHT, Math.ceil(y + bottomMargin)));
-  pages.push(page);
   return {
     width,
     header,
@@ -850,56 +1138,314 @@ function escapeXml(value) {
     .replace(/"/g, '&quot;');
 }
 
-function renderSvgPage({ page, header, pageCount }) {
-  const pageTitle = page.page === 1 ? header.title : `${header.title} (continued)`;
-  const subtitle = page.page === 1 ? header.subtitle : `Page ${page.page} of ${pageCount}`;
+function renderSvgPage({ page }) {
+  const titleId = `claworld-report-title-${page.page}`;
+  const descId = `claworld-report-desc-${page.page}`;
+  const desc = `${page.title}. ${page.subtitle}. ${page.elements.length} transcript rows.`;
   const parts = [
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${page.width}" height="${page.height}" viewBox="0 0 ${page.width} ${page.height}" role="img" aria-label="${escapeXml(pageTitle)}">`,
-    '<style>',
-    '.bg{fill:#fbf7ef}.panel{fill:#fffdf8;stroke:#222;stroke-width:2}.title{font:700 26px Arial,sans-serif;fill:#161616}.subtitle{font:14px Arial,sans-serif;fill:#5f5b52}.label{font:700 12px Arial,sans-serif;fill:#666}.bubblePeer{fill:#ffffff;stroke:#222;stroke-width:2}.bubbleLocal{fill:#dff3e5;stroke:#1d3b29;stroke-width:2}.msg{font:15px Arial,sans-serif;fill:#171717}.time{font:12px Arial,sans-serif;fill:#736d63}.tag{font:700 11px Arial,sans-serif;fill:#161616}.tagBox{fill:#f6cf4f;stroke:#222;stroke-width:1}.tagEnd{fill:#f0b4a8}.tagLike{fill:#b9e3ff}.tagDislike{fill:#ddd}.shadow{fill:#222;opacity:.16}',
-    '</style>',
-    `<rect class="bg" x="0" y="0" width="${page.width}" height="${page.height}"/>`,
-    `<rect class="panel" x="22" y="18" width="${page.width - 44}" height="${page.height - 36}" rx="18"/>`,
-    `<text class="title" x="42" y="56">${escapeXml(pageTitle)}</text>`,
-    `<text class="subtitle" x="42" y="80">${escapeXml(subtitle || 'Claworld transcript')}</text>`,
+    `<svg class="comic-grid" xmlns="http://www.w3.org/2000/svg" width="${page.width}" height="${page.height}" viewBox="0 0 ${page.width} ${page.height}" role="img" aria-labelledby="${titleId} ${descId}">`,
+    `<title id="${titleId}">${escapeXml(page.title)}</title>`,
+    `<desc id="${descId}">${escapeXml(desc)}</desc>`,
+    svgDefs(),
+    `<rect x="0" y="0" width="${page.width}" height="${page.height}" fill="${COMIC_THEME.paper}"/>`,
+    `<rect x="0" y="0" width="${page.width}" height="${page.height}" fill="url(#comicGridMinor)"/>`,
+    `<rect x="0" y="0" width="${page.width}" height="${page.height}" fill="url(#comicGridMajor)" opacity="0.46"/>`,
+    `<rect x="${FRAME_MARGIN}" y="${FRAME_MARGIN}" width="${page.width - FRAME_MARGIN * 2}" height="${page.height - FRAME_MARGIN * 2}" rx="46" fill="none" stroke="${BLACK}" stroke-width="6"/>`,
+    renderHeaderSvg(page),
+    '<g role="list">',
   ];
-
-  for (const element of page.elements) {
-    if (element.kind === 'time') {
-      parts.push(`<text class="time" x="${page.width / 2}" y="${element.y + 18}" text-anchor="middle">${escapeXml(element.label)}</text>`);
+  for (const item of page.elements) {
+    if (item.kind === 'ellipsis') {
+      parts.push(renderEllipsisSvg(page, item));
       continue;
     }
-    const { message, layout, x, y, width, height } = element;
-    const bubbleClass = message.side === 'local' ? 'bubbleLocal' : 'bubblePeer';
-    const label = message.side === 'local' ? header.localLabel : (message.speaker || header.peerLabel);
-    parts.push(`<text class="label" x="${x}" y="${y + 10}">${escapeXml(label)}</text>`);
-    parts.push(`<rect class="shadow" x="${x + 4}" y="${y + 18}" width="${width}" height="${height}" rx="16"/>`);
-    parts.push(`<rect class="${bubbleClass}" x="${x}" y="${y + 14}" width="${width}" height="${height}" rx="16"/>`);
-    const textX = x + 17;
-    let textY = y + 40;
-    for (const [index, line] of layout.lines.entries()) {
-      parts.push(`<text class="msg" x="${textX}" y="${textY + index * 20}">${escapeXml(line)}</text>`);
-    }
-    textY += layout.lines.length * 20 + 4;
-    let tagX = textX;
-    for (const tag of message.tags) {
-      const tagWidth = Math.max(48, displayColumns(tag) * 7 + 24);
-      const className = tag === 'request end'
-        ? 'tagEnd'
-        : tag === 'like'
-          ? 'tagLike'
-          : tag === 'dislike'
-            ? 'tagDislike'
-            : 'tagBox';
-      parts.push(`<rect class="${className}" x="${tagX}" y="${textY}" width="${tagWidth}" height="18" rx="9"/>`);
-      parts.push(`<text class="tag" x="${tagX + 12}" y="${textY + 13}">${escapeXml(tag)}</text>`);
-      tagX += tagWidth + 6;
+    if (item.kind === 'time') {
+      parts.push(renderTimeSvg(page, item));
+      continue;
     }
+    parts.push(renderMessageSvg(item));
+  }
+  parts.push('</g>');
+  if (page.footer) {
+    parts.push(`<text x="${(page.width / 2).toFixed(1)}" y="${page.height - 24}" text-anchor="middle" font-size="${SMALL_FONT_SIZE}" fill="#444444">${escapeXml(page.footer)}</text>`);
   }
   parts.push('</svg>');
   return parts.join('\n');
 }
 
+function positions(width, bubbleWidth, label, side) {
+  const labelWidth = labelWidthForText(label);
+  const inset = CANVAS_MARGIN + 38;
+  if (side === 'right') {
+    const bubbleX = width - inset - bubbleWidth;
+    const labelX = bubbleX + bubbleWidth - labelWidth - 16;
+    return { bubbleX, labelX, labelWidth, align: 'right' };
+  }
+  const bubbleX = inset;
+  const labelX = bubbleX + 16;
+  return { bubbleX, labelX, labelWidth, align: 'left' };
+}
+
+function renderHeaderSvg(page) {
+  const x = CANVAS_MARGIN + 26;
+  const y = HEADER_Y;
+  const width = page.width - (CANVAS_MARGIN + 26) * 2;
+  const height = headerCardHeight(page.subtitle);
+  const title = clipDisplay(headerTitle(page.title), 32);
+  return [
+    `<rect x="${x + 11}" y="${y + 6}" width="${width + 2}" height="${height + 10}" rx="22" fill="${BLACK}"/>`,
+    `<rect x="${x + 7}" y="${y + 6}" width="${width}" height="${height + 4}" rx="22" fill="url(#headerAccent)"/>`,
+    `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="22" fill="${COMIC_THEME.headerFill}" stroke="${BLACK}" stroke-width="4"/>`,
+    `<text x="${x + 28}" y="${y + 43}" font-size="${TITLE_FONT_SIZE}" font-weight="900" fill="${BLACK}">${escapeXml(title)}</text>`,
+    renderHeaderSubtitleSvg(x + 35, y + 70, headerSubtitleLines(page.subtitle)),
+    decorativeStarSvg(x + width - 62, y + 34, 22, '#FFFFFF', 'url(#headerAccent)'),
+    `<circle cx="${x + width - 23}" cy="${y + 55}" r="9" fill="#72E3C0" stroke="${BLACK}" stroke-width="3"/>`,
+    `<circle cx="${x + width - 25}" cy="${y + 53}" r="9" fill="#72E3C0" stroke="${BLACK}" stroke-width="3"/>`,
+  ].join('\n');
+}
+
+function headerSubtitleLines(subtitle) {
+  const lines = wrapText(String(subtitle || '').trim(), HEADER_SUBTITLE_MAX_UNITS);
+  if (lines.length <= HEADER_SUBTITLE_MAX_LINES) return lines;
+  const visible = lines.slice(0, HEADER_SUBTITLE_MAX_LINES - 1);
+  const remainder = lines.slice(HEADER_SUBTITLE_MAX_LINES - 1).map((line) => line.trim()).filter(Boolean).join(' ');
+  visible.push(ellipsizeText(remainder, HEADER_SUBTITLE_MAX_UNITS));
+  return visible;
+}
+
+function headerCardHeight(subtitle) {
+  return headerSubtitleLines(subtitle).length > 1
+    ? HEADER_CARD_HEIGHT_TWO_LINES
+    : HEADER_CARD_HEIGHT_ONE_LINE;
+}
+
+function headerHeightForSubtitle(subtitle) {
+  return HEADER_Y + headerCardHeight(subtitle) + HEADER_BOTTOM_PAD;
+}
+
+function renderHeaderSubtitleSvg(x, y, lines) {
+  return lines.map((line, index) => (
+    `<text class="header-subtitle-line" x="${x.toFixed(1)}" y="${(y + index * HEADER_SUBTITLE_LINE_HEIGHT).toFixed(1)}" font-size="15" font-weight="600" fill="${COMIC_THEME.muted}">${escapeXml(line)}</text>`
+  )).join('\n');
+}
+
+function renderEllipsisSvg(page, item) {
+  const y = item.y + 7;
+  return `<text x="${(page.width / 2).toFixed(1)}" y="${y + 14}" text-anchor="middle" font-size="${SMALL_FONT_SIZE}" fill="#555555">${escapeXml(item.label)}</text>`;
+}
+
+function renderTimeSvg(page, item) {
+  const label = clipDisplay(item.label, 22);
+  const labelWidth = Math.max(150, displayColumns(label) * 8 + 44);
+  const x = page.width / 2 - labelWidth / 2;
+  const y = item.y + 4;
+  return [
+    '<g class="time-row">',
+    diamondSvg(x - 28, y + 16, 13, COMIC_THEME.timeAccentLeft),
+    `<rect x="${(x + 3).toFixed(1)}" y="${y + 4}" width="${labelWidth}" height="30" rx="15" fill="${BLACK}"/>`,
+    `<rect x="${x.toFixed(1)}" y="${y}" width="${labelWidth}" height="30" rx="15" fill="${COMIC_THEME.timeFill}" stroke="${BLACK}" stroke-width="3"/>`,
+    `<text x="${(page.width / 2).toFixed(1)}" y="${y + 21}" text-anchor="middle" font-size="${FONT_SIZE}" font-weight="700" fill="${BLACK}">${escapeXml(label)}</text>`,
+    diamondSvg(x + labelWidth + 28, y + 16, 13, COMIC_THEME.timeAccentRight),
+    '</g>',
+  ].join('\n');
+}
+
+function renderMessageSvg(item) {
+  const colors = sideColors(item.side);
+  const messageText = item.message?.text || '';
+  const titleText = escapeXml(`${item.participantLabel}: ${ellipsizeText(messageText, 42)}`);
+  const parts = [
+    `<g class="message-row ${item.side}" role="listitem" aria-label="${titleText}">`,
+    `<title>${titleText}</title>`,
+    bubbleLayersSvg(item, colors),
+    `<rect x="${item.labelX}" y="${item.labelY}" width="${item.labelWidth}" height="${LABEL_HEIGHT}" rx="9" fill="${colors.label}" stroke="${BLACK}" stroke-width="3"/>`,
+    `<text x="${(item.labelX + item.labelWidth / 2).toFixed(1)}" y="${item.labelY + 21}" text-anchor="middle" font-size="${LABEL_FONT_SIZE}" font-weight="900" fill="${BLACK}">${escapeXml(item.label)}</text>`,
+  ];
+  const textX = item.bubbleX + BUBBLE_PAD_X;
+  let textY = item.bubbleY + BUBBLE_PAD_Y + 17;
+  for (const line of item.lines) {
+    parts.push(`<text x="${textX}" y="${textY}" font-size="${FONT_SIZE}" font-weight="800" fill="${BLACK}">${escapeXml(line)}</text>`);
+    textY += LINE_HEIGHT;
+  }
+  const tags = messageTags(item.message);
+  if (tags.length) parts.push(renderTagIconsSvg(tags, textX, textY + TAG_ICON_TOP_GAP));
+  parts.push('</g>');
+  return parts.join('\n');
+}
+
+function bubbleLayersSvg(item, colors) {
+  const x = item.bubbleX;
+  const y = item.bubbleY;
+  const width = item.width;
+  const height = item.bubbleHeight;
+  return [
+    `<rect x="${x + 11}" y="${y + 9}" width="${width + 2}" height="${height + 4}" rx="17" fill="${BLACK}"/>`,
+    `<rect x="${x + 11}" y="${y + 9}" width="${width - 3}" height="${height}" rx="17" fill="${colors.accent}" stroke="${BLACK}" stroke-width="3"/>`,
+    `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="17" fill="${colors.fill}" stroke="${BLACK}" stroke-width="4"/>`,
+  ].join('\n');
+}
+
+function sideColors(side) {
+  if (side === 'right') {
+    return {
+      fill: COMIC_THEME.rightFill,
+      label: COMIC_THEME.rightLabel,
+      accent: 'url(#rightAccent)',
+    };
+  }
+  return {
+    fill: COMIC_THEME.leftFill,
+    label: COMIC_THEME.leftLabel,
+    accent: 'url(#leftAccent)',
+  };
+}
+
+function headerTitle(title) {
+  const clean = String(title || '').trim();
+  if (clean.startsWith('@')) return clean;
+  return clean ? `@${clean}` : '@claworld';
+}
+
+function labelText(label) {
+  return clipDisplay(String(label || 'AGENT').toUpperCase(), LABEL_MAX_COLS);
+}
+
+function labelWidthForText(label) {
+  return Math.max(86, Math.min(158, displayColumns(label) * 11 + 30));
+}
+
+function tagRowUnits(tags) {
+  if (!tags.length) return 0;
+  const width = tags.reduce((sum, tag) => sum + tagWidth(tag), 0) + Math.max(0, tags.length - 1) * TAG_ICON_GAP;
+  return width / TEXT_UNIT_PX;
+}
+
+function renderTagIconsSvg(tags, x, y) {
+  const parts = [`<g class="tag-icons" transform="translate(${x.toFixed(1)} ${y.toFixed(1)})">`];
+  let cursor = 0;
+  for (const tag of tags) {
+    parts.push(tagIconSvg(tag, cursor, 0));
+    cursor += tagWidth(tag) + TAG_ICON_GAP;
+  }
+  parts.push('</g>');
+  return parts.join('\n');
+}
+
+function tagWidth(tag) {
+  const normalized = tagName(tag);
+  if (['like', 'dislike', 'request end'].includes(normalized)) return TAG_ICON_SIZE;
+  return Math.max(58, Math.min(126, displayColumns(fallbackTagLabel(normalized)) * 8 + 24));
+}
+
+function tagIconSvg(tag, x, y) {
+  const normalized = tagName(tag);
+  if (!['like', 'dislike', 'request end'].includes(normalized)) return fallbackTagSvg(normalized, x, y);
+  const [fill, accent] = TAG_ICON_THEMES[normalized] || ['#FFFFFF', '#7DD7FF'];
+  const icon = normalized === 'request end'
+    ? requestEndIconSvg(x, y, accent)
+    : thumbIconSvg(x, y, accent, { down: normalized === 'dislike' });
+  return [
+    `<g class="tag-icon tag-${safeClassToken(normalized)}" role="img" aria-label="${escapeXml(normalized)}">`,
+    `<title>${escapeXml(normalized)}</title>`,
+    `<rect x="${(x + 3).toFixed(1)}" y="${(y + 4).toFixed(1)}" width="${TAG_ICON_SIZE}" height="${TAG_ICON_SIZE}" rx="9" fill="${BLACK}"/>`,
+    `<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${TAG_ICON_SIZE}" height="${TAG_ICON_SIZE}" rx="9" fill="${fill}" stroke="${BLACK}" stroke-width="2.5"/>`,
+    icon,
+    '</g>',
+  ].join('\n');
+}
+
+function tagName(tag) {
+  return String(tag || '').trim().toLowerCase();
+}
+
+function fallbackTagLabel(tag) {
+  return clipDisplay(String(tag || 'tag'), TAG_FALLBACK_MAX_COLS);
+}
+
+function fallbackTagSvg(tag, x, y) {
+  const label = fallbackTagLabel(tag);
+  const width = tagWidth(tag);
+  return [
+    `<g class="tag-icon tag-fallback" role="img" aria-label="${escapeXml(label)}">`,
+    `<title>${escapeXml(label)}</title>`,
+    `<rect x="${(x + 3).toFixed(1)}" y="${(y + 4).toFixed(1)}" width="${width}" height="${TAG_ICON_SIZE}" rx="9" fill="${BLACK}"/>`,
+    `<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${width}" height="${TAG_ICON_SIZE}" rx="9" fill="#F6F1FF" stroke="${BLACK}" stroke-width="2.5"/>`,
+    `<text x="${(x + width / 2).toFixed(1)}" y="${(y + 20.5).toFixed(1)}" text-anchor="middle" font-size="${LABEL_FONT_SIZE}" font-weight="900" fill="${BLACK}">${escapeXml(label)}</text>`,
+    '</g>',
+  ].join('\n');
+}
+
+function thumbIconSvg(x, y, accent, { down = false } = {}) {
+  const paths = [
+    `<path d="M${(x + 7.8).toFixed(1)} ${(y + 13.3).toFixed(1)} H${(x + 12).toFixed(1)} V${(y + 24).toFixed(1)} H${(x + 7.8).toFixed(1)} Z" fill="#FFFFFF" stroke="${BLACK}" stroke-width="2" stroke-linejoin="round"/>`,
+    `<path d="M${(x + 12).toFixed(1)} ${(y + 23.6).toFixed(1)} H${(x + 21.2).toFixed(1)} C${(x + 23).toFixed(1)} ${(y + 23.6).toFixed(1)} ${(x + 24).toFixed(1)} ${(y + 22.5).toFixed(1)} ${(x + 24.4).toFixed(1)} ${(y + 20.9).toFixed(1)} L${(x + 25.4).toFixed(1)} ${(y + 15.6).toFixed(1)} C${(x + 25.8).toFixed(1)} ${(y + 13.9).toFixed(1)} ${(x + 24.5).toFixed(1)} ${(y + 12.2).toFixed(1)} ${(x + 22.7).toFixed(1)} ${(y + 12.2).toFixed(1)} H${(x + 18.6).toFixed(1)} L${(x + 19.2).toFixed(1)} ${(y + 9.1).toFixed(1)} C${(x + 19.5).toFixed(1)} ${(y + 7.4).toFixed(1)} ${(x + 18.4).toFixed(1)} ${(y + 5.7).toFixed(1)} ${(x + 16.7).toFixed(1)} ${(y + 5.4).toFixed(1)} L${(x + 15.8).toFixed(1)} ${(y + 5.3).toFixed(1)} L${(x + 12).toFixed(1)} ${(y + 12.9).toFixed(1)} Z" fill="${accent}" stroke="${BLACK}" stroke-width="2" stroke-linejoin="round"/>`,
+  ].join('\n');
+  if (!down) return paths;
+  const cx = x + TAG_ICON_SIZE / 2;
+  const cy = y + TAG_ICON_SIZE / 2;
+  return `<g transform="rotate(180 ${cx.toFixed(1)} ${cy.toFixed(1)})">\n${paths}\n</g>`;
+}
+
+function requestEndIconSvg(x, y, accent) {
+  return [
+    `<path d="M${(x + 22).toFixed(1)} ${(y + 4).toFixed(1)} C${(x + 25.2).toFixed(1)} ${(y + 5.4).toFixed(1)} ${(x + 26.6).toFixed(1)} ${(y + 7.8).toFixed(1)} ${(x + 26.5).toFixed(1)} ${(y + 10.6).toFixed(1)}" fill="none" stroke="${BLACK}" stroke-width="2" stroke-linecap="round"/>`,
+    `<path d="M${(x + 9.215).toFixed(3)} ${(y + 18.117).toFixed(3)} C${(x + 10.043).toFixed(3)} ${(y + 22.457).toFixed(3)} ${(x + 13.384).toFixed(3)} ${(y + 25.036).toFixed(3)} ${(x + 17.132).toFixed(3)} ${(y + 23.961).toFixed(3)} L${(x + 19.44).toFixed(3)} ${(y + 23.3).toFixed(3)} C${(x + 22.323).toFixed(3)} ${(y + 22.473).toFixed(3)} ${(x + 23.488).toFixed(3)} ${(y + 19.642).toFixed(3)} ${(x + 22.538).toFixed(3)} ${(y + 16.69).toFixed(3)} L${(x + 21.435).toFixed(3)} ${(y + 12.845).toFixed(3)} L${(x + 9.227).toFixed(3)} ${(y + 16.345).toFixed(3)} L${(x + 9.215).toFixed(3)} ${(y + 18.117).toFixed(3)} Z" fill="${accent}" stroke="${BLACK}" stroke-width="2" stroke-linejoin="round"/>`,
+    `<path d="M${(x + 9.665).toFixed(3)} ${(y + 7.897).toFixed(3)} L${(x + 9.473).toFixed(3)} ${(y + 7.952).toFixed(3)} C${(x + 8.756).toFixed(3)} ${(y + 8.158).toFixed(3)} ${(x + 8.286).toFixed(3)} ${(y + 8.709).toFixed(3)} ${(x + 8.422).toFixed(3)} ${(y + 9.184).toFixed(3)} L${(x + 10.192).toFixed(3)} ${(y + 15.356).toFixed(3)} C${(x + 10.328).toFixed(3)} ${(y + 15.831).toFixed(3)} ${(x + 11.019).toFixed(3)} ${(y + 16.049).toFixed(3)} ${(x + 11.736).toFixed(3)} ${(y + 15.843).toFixed(3)} L${(x + 11.928).toFixed(3)} ${(y + 15.788).toFixed(3)} C${(x + 12.645).toFixed(3)} ${(y + 15.583).toFixed(3)} ${(x + 13.115).toFixed(3)} ${(y + 15.031).toFixed(3)} ${(x + 12.979).toFixed(3)} ${(y + 14.557).toFixed(3)} L${(x + 11.209).toFixed(3)} ${(y + 8.384).toFixed(3)} C${(x + 11.073).toFixed(3)} ${(y + 7.91).toFixed(3)} ${(x + 10.382).toFixed(3)} ${(y + 7.692).toFixed(3)} ${(x + 9.665).toFixed(3)} ${(y + 7.897).toFixed(3)} Z" fill="${accent}" stroke="${BLACK}" stroke-width="1.8"/>`,
+    `<path d="M${(x + 11.93).toFixed(3)} ${(y + 5.999).toFixed(3)} L${(x + 11.738).toFixed(3)} ${(y + 6.055).toFixed(3)} C${(x + 11.021).toFixed(3)} ${(y + 6.26).toFixed(3)} ${(x + 10.553).toFixed(3)} ${(y + 6.82).toFixed(3)} ${(x + 10.692).toFixed(3)} ${(y + 7.306).toFixed(3)} L${(x + 12.729).toFixed(3)} ${(y + 14.408).toFixed(3)} C${(x + 12.868).toFixed(3)} ${(y + 14.894).toFixed(3)} ${(x + 13.562).toFixed(3)} ${(y + 15.122).toFixed(3)} ${(x + 14.279).toFixed(3)} ${(y + 14.916).toFixed(3)} L${(x + 14.471).toFixed(3)} ${(y + 14.861).toFixed(3)} C${(x + 15.188).toFixed(3)} ${(y + 14.655).toFixed(3)} ${(x + 15.656).toFixed(3)} ${(y + 14.095).toFixed(3)} ${(x + 15.516).toFixed(3)} ${(y + 13.609).toFixed(3)} L${(x + 13.48).toFixed(3)} ${(y + 6.507).toFixed(3)} C${(x + 13.341).toFixed(3)} ${(y + 6.021).toFixed(3)} ${(x + 12.647).toFixed(3)} ${(y + 5.794).toFixed(3)} ${(x + 11.93).toFixed(3)} ${(y + 5.999).toFixed(3)} Z" fill="${accent}" stroke="${BLACK}" stroke-width="1.8"/>`,
+    `<path d="M${(x + 14.636).toFixed(3)} ${(y + 5.64).toFixed(3)} L${(x + 14.443).toFixed(3)} ${(y + 5.695).toFixed(3)} C${(x + 13.727).toFixed(3)} ${(y + 5.9).toFixed(3)} ${(x + 13.258).toFixed(3)} ${(y + 6.457).toFixed(3)} ${(x + 13.396).toFixed(3)} ${(y + 6.938).toFixed(3)} L${(x + 15.338).toFixed(3)} ${(y + 13.714).toFixed(3)} C${(x + 15.476).toFixed(3)} ${(y + 14.195).toFixed(3)} ${(x + 16.169).toFixed(3)} ${(y + 14.418).toFixed(3)} ${(x + 16.886).toFixed(3)} ${(y + 14.213).toFixed(3)} L${(x + 17.078).toFixed(3)} ${(y + 14.157).toFixed(3)} C${(x + 17.795).toFixed(3)} ${(y + 13.952).toFixed(3)} ${(x + 18.264).toFixed(3)} ${(y + 13.395).toFixed(3)} ${(x + 18.126).toFixed(3)} ${(y + 12.914).toFixed(3)} L${(x + 16.183).toFixed(3)} ${(y + 6.139).toFixed(3)} C${(x + 16.045).toFixed(3)} ${(y + 5.658).toFixed(3)} ${(x + 15.352).toFixed(3)} ${(y + 5.434).toFixed(3)} ${(x + 14.636).toFixed(3)} ${(y + 5.64).toFixed(3)} Z" fill="${accent}" stroke="${BLACK}" stroke-width="1.8"/>`,
+    `<path d="M${(x + 17.8).toFixed(3)} ${(y + 6.085).toFixed(3)} L${(x + 17.702).toFixed(3)} ${(y + 6.113).toFixed(3)} C${(x + 16.971).toFixed(3)} ${(y + 6.322).toFixed(3)} ${(x + 16.482).toFixed(3)} ${(y + 6.851).toFixed(3)} ${(x + 16.609).toFixed(3)} ${(y + 7.294).toFixed(3)} L${(x + 18.176).toFixed(3)} ${(y + 12.759).toFixed(3)} C${(x + 18.303).toFixed(3)} ${(y + 13.202).toFixed(3)} ${(x + 18.998).toFixed(3)} ${(y + 13.391).toFixed(3)} ${(x + 19.729).toFixed(3)} ${(y + 13.182).toFixed(3)} L${(x + 19.827).toFixed(3)} ${(y + 13.154).toFixed(3)} C${(x + 20.557).toFixed(3)} ${(y + 12.944).toFixed(3)} ${(x + 21.046).toFixed(3)} ${(y + 12.415).toFixed(3)} ${(x + 20.919).toFixed(3)} ${(y + 11.972).toFixed(3)} L${(x + 19.352).toFixed(3)} ${(y + 6.507).toFixed(3)} C${(x + 19.225).toFixed(3)} ${(y + 6.065).toFixed(3)} ${(x + 18.53).toFixed(3)} ${(y + 5.875).toFixed(3)} ${(x + 17.8).toFixed(3)} ${(y + 6.085).toFixed(3)} Z" fill="${accent}" stroke="${BLACK}" stroke-width="1.8"/>`,
+    `<path d="M${(x + 9.546).toFixed(3)} ${(y + 19.999).toFixed(3)} L${(x + 6).toFixed(3)} ${(y + 17.791).toFixed(3)} C${(x + 4.736).toFixed(3)} ${(y + 17.009).toFixed(3)} ${(x + 5.668).toFixed(3)} ${(y + 15.181).toFixed(3)} ${(x + 7.138).toFixed(3)} ${(y + 15.592).toFixed(3)} L${(x + 10.615).toFixed(3)} ${(y + 17.196).toFixed(3)} L${(x + 9.546).toFixed(3)} ${(y + 19.999).toFixed(3)} Z" fill="${accent}" stroke="${BLACK}" stroke-width="1.8" stroke-linejoin="round"/>`,
+    `<rect x="${(x + 10.887).toFixed(3)}" y="${(y + 14.834).toFixed(3)}" width="9.584" height="3.800" transform="rotate(-16.9438 ${(x + 10.887).toFixed(3)} ${(y + 14.834).toFixed(3)})" fill="${accent}"/>`,
+    `<path d="M${(x + 10.5).toFixed(1)} ${(y + 19.5).toFixed(1)} L${(x + 11).toFixed(1)} ${(y + 20).toFixed(1)} L${(x + 11.5).toFixed(1)} ${(y + 17).toFixed(1)} L${(x + 9.5).toFixed(1)} ${(y + 17.5).toFixed(1)} L${(x + 9).toFixed(1)} ${(y + 18.5).toFixed(1)} L${(x + 10.5).toFixed(1)} ${(y + 19.5).toFixed(1)} Z" fill="${accent}"/>`,
+  ].join('\n');
+}
+
+function decorativeStarSvg(cx, cy, radius, fill, accent) {
+  const backPath = starPoints(cx + 3, cy + 5, radius).map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
+  const frontPath = starPoints(cx, cy, radius).map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
+  return [
+    `<polygon points="${backPath}" fill="${accent}"/>`,
+    `<polygon points="${frontPath}" fill="${fill}" stroke="${BLACK}" stroke-width="3"/>`,
+  ].join('\n');
+}
+
+function diamondSvg(cx, cy, radius, fill) {
+  const shadow = `<polygon points="${(cx + 1).toFixed(1)},${(cy + 2 - radius).toFixed(1)} ${(cx + 1 + radius * 0.46).toFixed(1)},${(cy + 2).toFixed(1)} ${(cx + 1).toFixed(1)},${(cy + 2 + radius).toFixed(1)} ${(cx + 1 - radius * 0.46).toFixed(1)},${(cy + 2).toFixed(1)}" fill="${BLACK}" stroke="${BLACK}" stroke-width="2.5"/>`;
+  const front = `<polygon points="${cx.toFixed(1)},${(cy - radius).toFixed(1)} ${(cx + radius * 0.46).toFixed(1)},${cy.toFixed(1)} ${cx.toFixed(1)},${(cy + radius).toFixed(1)} ${(cx - radius * 0.46).toFixed(1)},${cy.toFixed(1)}" fill="${fill}" stroke="${BLACK}" stroke-width="2.5"/>`;
+  return `${shadow}\n${front}`;
+}
+
+function starPoints(cx, cy, radius) {
+  return [
+    [cx, cy - radius],
+    [cx + radius * 0.28, cy - radius * 0.28],
+    [cx + radius, cy],
+    [cx + radius * 0.28, cy + radius * 0.28],
+    [cx, cy + radius],
+    [cx - radius * 0.28, cy + radius * 0.28],
+    [cx - radius, cy],
+    [cx - radius * 0.28, cy - radius * 0.28],
+  ];
+}
+
+function safeClassToken(value) {
+  return String(value || 'tag').toLowerCase().replace(/[^a-z0-9_-]+/g, '-') || 'tag';
+}
+
+function svgDefs() {
+  return [
+    '<defs>',
+    `<style><![CDATA[text { font-family: ${COMIC_FONT_FAMILY}; letter-spacing: 0; } .message-row:hover rect:last-of-type { filter: url(#comicLift); }]]></style>`,
+    '<pattern id="comicGridMinor" width="32" height="32" patternUnits="userSpaceOnUse"><path d="M 32 0 L 0 0 0 32" fill="none" stroke="#BED1D8" stroke-width="1" stroke-opacity="0.62"/></pattern>',
+    '<pattern id="comicGridMajor" width="128" height="128" patternUnits="userSpaceOnUse"><path d="M 128 0 L 0 0 0 128" fill="none" stroke="#AABFC8" stroke-width="1.4" stroke-opacity="0.72"/></pattern>',
+    '<linearGradient id="headerAccent" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#47B6FF"/><stop offset="52%" stop-color="#FF4EB4"/><stop offset="100%" stop-color="#FF8A2A"/></linearGradient>',
+    '<linearGradient id="leftAccent" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#58E58F"/><stop offset="100%" stop-color="#47B6FF"/></linearGradient>',
+    '<linearGradient id="rightAccent" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#A871FF"/><stop offset="100%" stop-color="#FF4EB4"/></linearGradient>',
+    '<filter id="comicLift" x="-6%" y="-16%" width="112%" height="132%"><feDropShadow dx="0" dy="2" stdDeviation="1.2" flood-color="#000000" flood-opacity="0.14"/></filter>',
+    '</defs>',
+  ].join('\n');
+}
+
 function buildBubbleSpec({ mode, source, header, messages, layout, style }) {
   return {
     schema: ARTIFACT_SCHEMA,