discord-html-transcripts-fix 1.3.0 → 1.6.0

package/dist/generator/index.js

@@ -134,7 +134,6 @@ async function render(_a) {
             (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.searchBarStyles } }),
             (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.lightboxStyles } }),
             (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.tocStyles } }),
-            (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.i18nStyles } }),
             (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.dateSeparatorStyles } }),
             (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.markdownStyles } }),
             (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: client_1.filterPanelStyles } }),
@@ -155,16 +154,13 @@ async function render(_a) {
         ] }),
         (0, jsx_runtime_1.jsxs)("body", { style: { margin: 0, minHeight: '100vh' }, children: [
             (0, jsx_runtime_1.jsx)(transcript_1.default, Object.assign({ messages, channel, callbacks }, options, renderContext)),
-            (0, jsx_runtime_1.jsx)(StatsFooter, { stats, lang, i18n }),
+            renderStatsFooter(stats, lang, i18n, options.statsFooter),
             (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.mentionPopup } }),
-            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.backToTop } }),
             (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.searchBar } }),
             (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.lightbox } }),
             (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.toc } }),
-            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.i18nSwitcher } }),
             (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.filterPanel } }),
             (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.codeCopyButton } }),
-            (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.permalinkButton } }),
             options.hydrate && (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: client_1.revealSpoiler } }),
         ] })
     ] });
@@ -200,27 +196,63 @@ function formatSpan(ms, lang) {
     if (mins > 0) return `${mins}m`;
     return '<1m';
 }
-function StatsFooter({ stats, lang, i18n }) {
-    const dict = (i18n && i18n[lang]) || (i18n && i18n.en) || {};
+// Renders the bottom stats footer. Caller-controlled via options.statsFooter:
+//   false                            → no footer
+//   { enabled: false }               → no footer
+//   { template: '{messages} ...' }   → render with custom template
+//                                      Placeholders: {messages} {participants}
+//                                      {images} {from} {to} {span}
+// Default: en template "X messages · Y participants · Z images · from → to · span"
+function renderStatsFooter(stats, lang, i18n, opts) {
+    if (opts === false) return null;
+    const config = (opts && typeof opts === 'object') ? opts : {};
+    if (config.enabled === false) return null;
+
     const locale = lang === 'de' ? 'de-DE' : 'en-US';
-    const fmtDate = (ms) => new Date(ms).toLocaleString(locale, { dateStyle: 'medium', timeStyle: 'short' });
-    return (0, jsx_runtime_1.jsxs)("footer", { className: "dht-stats", children: [
-        (0, jsx_runtime_1.jsx)("span", { children: (dict.statsMessages || '{n} messages').replace('{n}', stats.messageCount) }),
-        ' · ',
-        (0, jsx_runtime_1.jsx)("span", { children: (dict.statsParticipants || '{n} participants').replace('{n}', stats.participantCount) }),
-        ' · ',
-        (0, jsx_runtime_1.jsx)("span", { children: (dict.statsImages || '{n} images').replace('{n}', stats.imageCount) }),
-        stats.firstTs && stats.lastTs && (0, jsx_runtime_1.jsxs)("span", { children: [' · ', fmtDate(stats.firstTs), ' → ', fmtDate(stats.lastTs)] }),
-        stats.spanMs && (0, jsx_runtime_1.jsxs)("span", { children: [' · ', formatSpan(stats.spanMs)] }),
-    ] });
+    const fmtDate = (ms) => ms ? new Date(ms).toLocaleString(locale, { dateStyle: 'medium', timeStyle: 'short' }) : '';
+    const span = stats.spanMs ? formatSpan(stats.spanMs) : '';
+
+    const values = {
+        messages: String(stats.messageCount),
+        participants: String(stats.participantCount),
+        images: String(stats.imageCount),
+        from: fmtDate(stats.firstTs),
+        to: fmtDate(stats.lastTs),
+        span,
+    };
+
+    if (typeof config.template === 'string' && config.template.length > 0) {
+        const rendered = config.template.replace(/\{(messages|participants|images|from|to|span)\}/g, (_, k) => values[k] || '');
+        return (0, jsx_runtime_1.jsx)("footer", { className: "dht-stats", children: rendered });
+    }
+
+    const dict = (i18n && i18n[lang]) || (i18n && i18n.en) || {};
+    const parts = [
+        (dict.statsMessages || '{n} messages').replace('{n}', values.messages),
+        (dict.statsParticipants || '{n} participants').replace('{n}', values.participants),
+        (dict.statsImages || '{n} images').replace('{n}', values.images),
+    ];
+    if (values.from && values.to) parts.push(values.from + ' → ' + values.to);
+    if (values.span) parts.push(values.span);
+    return (0, jsx_runtime_1.jsx)("footer", { className: "dht-stats", children: parts.join(' · ') });
 }
 
 const extraStyles = `
 /* Ensure the host establishes a positioning context for the absolute pin indicator,
    and clamp it inside the message box on narrow viewports. */
+/* Action-row buttons — Discord-like horizontal spacing */
+discord-action-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
+.dht-v2-container discord-action-row,.dht-section-content discord-action-row{margin:6px 0}
+/* V2 container — Discord-like spacing inside block flow */
+.dht-v2-container .dht-heading,.dht-section-content .dht-heading{margin:8px 0 4px}
+.dht-v2-container .dht-heading:first-child,.dht-section-content .dht-heading:first-child{margin-top:0}
+.dht-v2-container .dht-v2-separator,.dht-section-content .dht-v2-separator{margin:8px 0}
+.dht-v2-container strong,.dht-section-content strong{display:inline;font-weight:700;color:#fff}
+.dht-v2-container .dht-mention,.dht-section-content .dht-mention{display:inline-block;vertical-align:baseline}
+/* System-message author — clickable like a user mention */
+.dht-sys-author{cursor:pointer;font-style:normal;font-weight:500}
+.dht-sys-author:hover{text-decoration:underline}
 .dht-msg-pinned{position:relative}
-.dht-pinned-indicator{position:absolute;top:4px;left:4px;font-size:12px;opacity:.75;pointer-events:none}
-@media (max-width:640px){.dht-pinned-indicator{position:static;display:inline-block;margin-right:4px}}
 .dht-app-badge,.dht-popup-badge{background:#5865F2;color:#fff;font-size:10px;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle;font-weight:600}
 .dht-edit-marker{color:#949ba4;font-size:11px;margin-left:4px;cursor:help}
 .dht-suppressed{color:#6e727a;font-size:11px;font-style:italic}

package/dist/generator/renderers/components/Container.js

@@ -19,12 +19,17 @@ function DiscordContainer({ children, accentColor, spoiler }) {
     // string can't smuggle CSS into the inline borderLeft.
     const raw = colorToHex(accentColor);
     const hex = raw ? (0, utils_1.safeColor)(raw, null) : null;
+    // FIX: previous layout was display:flex;flex-direction:column;gap:8px which
+    // forced every direct child — including inline <strong>, <br>, mention
+    // <span> and text nodes — to become its own vertical flex item. That broke
+    // sentences across multiple lines and made role mentions fill the entire
+    // row. Use normal block flow instead so inline content lays out the way
+    // Discord renders it.
     const style = {
-        display: 'flex',
+        display: 'block',
         width: '100%',
         maxWidth: '500px',
         minWidth: 0,
-        flexDirection: 'column',
         backgroundColor: '#3f4248',
         padding: '16px',
         borderLeft: hex ? `4px solid ${hex}` : '1px solid #4f5359',
@@ -34,10 +39,13 @@ function DiscordContainer({ children, accentColor, spoiler }) {
         marginTop: '2px',
         marginBottom: '2px',
         borderRadius: '10px',
-        gap: '8px',
         boxSizing: 'border-box',
+        lineHeight: 1.4,
+        color: '#dbdee1',
+        wordBreak: 'break-word',
+        overflowWrap: 'anywhere',
     };
-    const node = (0, jsx_runtime_1.jsx)("div", { style, children });
+    const node = (0, jsx_runtime_1.jsx)("div", { className: "dht-v2-container", style, children });
     if (spoiler) {
         return (0, jsx_runtime_1.jsx)("span", { className: "discord-spoiler", children: node });
     }

package/dist/generator/renderers/components/section/SectionContent.js

@@ -3,12 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 function SectionContent({ children }) {
     return ((0, jsx_runtime_1.jsx)("div", {
+        className: "dht-section-content",
         style: {
-            display: 'flex',
-            flexDirection: 'column',
+            // Block flow so inline content (mentions, strong, br, text) flows
+            // naturally inside the section instead of becoming flex rows.
+            display: 'block',
             flex: 1,
-            minWidth: 0, // allow text to shrink/wrap inside flex parent
+            minWidth: 0,
             overflowWrap: 'anywhere',
+            wordBreak: 'break-word',
+            lineHeight: 1.4,
         },
         children
     }));

package/dist/generator/renderers/content.js

@@ -195,62 +195,61 @@ async function renderASTNode(node, context) {
             const id = node.id;
             if (typeof id === 'string' && /^[a-z][a-z-]*$/.test(id)) {
                 const label = GUIDE_LABELS[id] || id;
-                return (0, jsx_runtime_1.jsxs)("span", { className: "dht-mention dht-mention--channel", children: ["#", label] });
+                return (0, jsx_runtime_1.jsx)("span", { className: "dht-mention dht-mention--channel", children: '#' + label });
             }
-            const channel = await context.callbacks.resolveChannel(id).catch(() => null);
-            const name = channel ? (channel.isDMBased() ? 'DM Channel' : channel.name) : `unknown-${id.slice(-6)}`;
-            return (0, jsx_runtime_1.jsxs)("span", {
+            const channel = await Promise.resolve(context.callbacks.resolveChannel(id)).catch(() => null);
+            const name = channel ? (channel.isDMBased() ? 'DM Channel' : channel.name) : `unknown-${(id || '').slice(-6)}`;
+            return (0, jsx_runtime_1.jsx)("span", {
                 className: "dht-mention dht-mention--channel",
                 "data-mention-type": "channel",
                 "data-mention-id": id,
-                children: ["#", name]
+                children: '#' + name
             });
         }
 
         case 'role': {
             const id = node.id;
-            const role = await context.callbacks.resolveRole(id).catch(() => null);
-            const name = role?.name ?? `role-${id.slice(-6)}`;
+            const role = await Promise.resolve(context.callbacks.resolveRole(id)).catch(() => null);
+            const name = role?.name ?? `role-${(id || '').slice(-6)}`;
             const color = role?.hexColor && role.hexColor !== '#000000' ? (0, utils_1.safeColor)(role.hexColor, undefined) : undefined;
             const bg = color ? hexToRgba(color, 0.18) : undefined;
             const style = color ? { color, backgroundColor: bg, borderColor: hexToRgba(color, 0.45) } : undefined;
-            return (0, jsx_runtime_1.jsxs)("span", {
+            return (0, jsx_runtime_1.jsx)("span", {
                 className: "dht-mention dht-mention--role",
                 "data-mention-type": "role",
                 "data-mention-id": id,
                 style,
-                children: ["@", name]
+                children: '@' + name
             });
         }
 
         case 'user': {
             const id = node.id;
-            const user = await context.callbacks.resolveUser(id).catch(() => null);
-            const name = user ? (user.displayName ?? user.username ?? `user-${id.slice(-6)}`) : `user-${id.slice(-6)}`;
-            return (0, jsx_runtime_1.jsxs)("span", {
+            const user = await Promise.resolve(context.callbacks.resolveUser(id)).catch(() => null);
+            const name = user ? (user.displayName ?? user.username ?? `user-${(id || '').slice(-6)}`) : `user-${(id || '').slice(-6)}`;
+            return (0, jsx_runtime_1.jsx)("span", {
                 className: "dht-mention dht-mention--user",
                 "data-mention-type": "user",
                 "data-mention-id": id,
-                children: ["@", name]
+                children: '@' + name
             });
         }
 
         case 'slashCommand':
         case 'command': {
             const name = node.name || node.content || 'command';
-            return (0, jsx_runtime_1.jsxs)("span", { className: "dht-mention dht-mention--command", children: ["/", String(name)] });
+            return (0, jsx_runtime_1.jsx)("span", { className: "dht-mention dht-mention--command", children: '/' + String(name) });
         }
 
         case 'guildNavigation': {
-            // discord-markdown-parser emits this for <id:guide> etc.
             const id = node.id || node.content || 'guide';
             const label = GUIDE_LABELS[id] || id;
-            return (0, jsx_runtime_1.jsxs)("span", { className: "dht-mention dht-mention--channel", children: ["#", label] });
+            return (0, jsx_runtime_1.jsx)("span", { className: "dht-mention dht-mention--channel", children: '#' + label });
         }
 
         case 'here':
         case 'everyone':
-            return (0, jsx_runtime_1.jsxs)("span", { className: "dht-mention dht-mention--role dht-mention--highlight", children: ["@", type] });
+            return (0, jsx_runtime_1.jsx)("span", { className: "dht-mention dht-mention--role dht-mention--highlight", children: '@' + type });
 
         case 'codeBlock':
             if (context.type !== RenderType.REPLY) {

package/dist/generator/renderers/message.js

@@ -80,9 +80,11 @@ async function DiscordMessage({ message, context }) {
         const authorName = (message.member?.nickname || message.author?.displayName || message.author?.username || '').toLowerCase();
         const ts = message.createdAt instanceof Date ? message.createdAt.getTime() : 0;
         const lowerText = (message.content || '').toLowerCase().slice(0, 4096);
-        const hasImage = message.attachments && Array.from(message.attachments.values()).some(a => typeof a.contentType === 'string' && a.contentType.startsWith('image/'));
-        const hasEmbed = message.embeds && message.embeds.length > 0;
-        const hasAttachment = message.attachments && message.attachments.size > 0;
+        const mediaFlags = detectMediaFlags(message);
+        const hasImage = mediaFlags.hasImage;
+        const hasEmbed = mediaFlags.hasEmbed;
+        const hasAttachment = mediaFlags.hasAttachment;
+        const hasComponentV2 = mediaFlags.hasComponentV2;
         const stickers = message.stickers && message.stickers.size > 0
             ? Array.from(message.stickers.values()).map((s) => ({
                 id: s.id,
@@ -107,11 +109,8 @@ async function DiscordMessage({ message, context }) {
         // Forwarded message snapshots (messageSnapshots) — render before the empty body
         const snapshots = Array.isArray(message.messageSnapshots) ? message.messageSnapshots : [];
 
-        const isApp = !!(message.author?.bot && message.applicationId);
-
         const editedAtIso = message.editedAt instanceof Date ? message.editedAt.toISOString() : null;
         const pinned = !!message.pinned;
-        const verifiedBot = !!message.author?.flags?.has?.(discord_js_1.UserFlags.VerifiedBot);
 
         // Forum applied tags — only on the first message of a forum thread (the post itself)
         let appliedTagPills = null;
@@ -134,15 +133,10 @@ async function DiscordMessage({ message, context }) {
             }
         }
 
-        // Build a comma-separated badge list for additional flag rendering
-        const slashCmdLine = renderSlashCommandLine(message, context);
-
-        // Resolve author profile data for Skyra slot attributes — without these the
-        // <discord-message> web component falls back to a generic display
-        const authorMember = message.member;
-        const authorDisplay = authorMember?.nickname ?? message.author?.displayName ?? message.author?.username;
-        const authorAvatar = authorMember?.displayAvatarURL?.({ size: 64 }) ?? message.author?.displayAvatarURL?.({ size: 64 });
-        const authorRoleHex = authorMember?.displayHexColor && authorMember.displayHexColor !== '#000000' ? authorMember.displayHexColor : undefined;
+        // Slash command interaction data is attached to <discord-command> as
+        // data attributes so the popup can show parameters Discord-style. We
+        // no longer render a separate "/cmd opt:val by user" line.
+        const slashData = buildSlashCommandData(message);
 
         return ((0, jsx_runtime_1.jsxs)("discord-message", {
             id: `m-${message.id}`,
@@ -151,11 +145,6 @@ async function DiscordMessage({ message, context }) {
             server: (isCrossGuildReply || isCrosspost || isCrossposted) ? true : undefined,
             highlight: message.mentions.everyone || pinned,
             profile: message.author.id,
-            author: authorDisplay,
-            avatar: authorAvatar,
-            roleColor: authorRoleHex,
-            bot: message.author?.bot && !message.webhookId ? true : undefined,
-            verified: verifiedBot ? true : undefined,
             className: pinned ? 'dht-msg dht-msg-pinned' : 'dht-msg',
             "data-author-id": message.author.id,
             "data-author-name": authorName,
@@ -166,13 +155,20 @@ async function DiscordMessage({ message, context }) {
             "data-has-image": hasImage ? 'true' : undefined,
             "data-has-embed": hasEmbed ? 'true' : undefined,
             "data-has-attachment": hasAttachment ? 'true' : undefined,
+            "data-has-component-v2": hasComponentV2 ? 'true' : undefined,
             children: [
-                pinned && (0, jsx_runtime_1.jsx)("div", { className: "dht-pinned-indicator", title: "Pinned message", children: "📌" }),
                 appliedTagPills,
                 (0, jsx_runtime_1.jsx)(reply_1.default, { message: message, context: context }),
-                message.interaction && ((0, jsx_runtime_1.jsx)("discord-command", { slot: "reply", profile: message.interaction.user.id, command: '/' + message.interaction.commandName })),
-                slashCmdLine,
-                isApp && (0, jsx_runtime_1.jsxs)("span", { className: "dht-app-badge", "data-i18n": "appBadge", children: [t(context, 'appBadge', 'APP'), verifiedBot && (0, jsx_runtime_1.jsx)("span", { className: "dht-verified-check", title: "Verified Bot", children: '✓' })] }),
+                message.interaction && ((0, jsx_runtime_1.jsx)("discord-command", {
+                    slot: "reply",
+                    profile: message.interaction.user.id,
+                    command: (slashData && slashData.cmd) || ('/' + message.interaction.commandName),
+                    className: "dht-slash-clickable",
+                    "data-slash-cmd": slashData ? slashData.cmd : ('/' + message.interaction.commandName),
+                    "data-slash-by": slashData ? slashData.by : '',
+                    "data-slash-by-id": slashData ? slashData.byId : message.interaction.user.id,
+                    "data-slash-options": JSON.stringify((slashData && slashData.opts) || []),
+                })),
                 isCrossposted && (0, jsx_runtime_1.jsx)("span", { className: "dht-badge dht-badge-crosspost", title: "Published from announcement channel", children: '📣 Published' }),
                 isCrosspost && (0, jsx_runtime_1.jsx)("span", { className: "dht-badge dht-badge-crosspost", title: "Follows another channel", children: '📡 Follow' }),
                 isSilent && (0, jsx_runtime_1.jsx)("span", { className: "dht-badge dht-badge-silent", title: "Silent message (no notification)", children: '🔕 Silent' }),
@@ -389,40 +385,108 @@ function renderSnapshots(snapshots, context, depth = 0) {
     });
 }
 
-function renderSlashCommandLine(message, context) {
+const COMPONENT_TYPE_ACTION_ROW = 1;
+const COMPONENT_TYPE_SECTION = 9;
+const COMPONENT_TYPE_THUMBNAIL = 11;
+const COMPONENT_TYPE_MEDIA_GALLERY = 12;
+const COMPONENT_TYPE_FILE = 13;
+const COMPONENT_TYPE_CONTAINER = 17;
+const FLAG_IS_COMPONENTS_V2 = 1 << 15;
+
+// Walks message.embeds and message.components to determine whether the message
+// carries media or V2 containers — used to drive the filter checkboxes
+// (data-has-image, data-has-attachment, data-has-embed, data-has-component-v2).
+function detectMediaFlags(message) {
+    const out = { hasImage: false, hasAttachment: false, hasEmbed: false, hasComponentV2: false };
+
+    // Direct attachments
+    if (message.attachments && typeof message.attachments.values === 'function') {
+        for (const a of message.attachments.values()) {
+            out.hasAttachment = true;
+            const ct = typeof a.contentType === 'string' ? a.contentType : '';
+            if (ct.startsWith('image/') || ct.startsWith('video/')) out.hasImage = true;
+        }
+    }
+
+    // Classic embeds
+    if (Array.isArray(message.embeds)) {
+        for (const e of message.embeds) {
+            if (!e) continue;
+            out.hasEmbed = true;
+            if (e.image || e.thumbnail) out.hasImage = true;
+            if (e.video && (e.video.url || e.video.proxyURL || e.video.proxy_url)) out.hasImage = true;
+        }
+    }
+
+    // Components V2 — message-level flag and recursive walk
+    const flags = (typeof message.flags?.bitfield === 'number') ? message.flags.bitfield : 0;
+    if (flags & FLAG_IS_COMPONENTS_V2) out.hasComponentV2 = true;
+
+    const walk = (comp) => {
+        if (!comp || typeof comp.type !== 'number') return;
+        switch (comp.type) {
+            case COMPONENT_TYPE_CONTAINER:
+                out.hasComponentV2 = true;
+                if (Array.isArray(comp.components)) for (const c of comp.components) walk(c);
+                break;
+            case COMPONENT_TYPE_SECTION:
+                if (Array.isArray(comp.components)) for (const c of comp.components) walk(c);
+                if (comp.accessory) walk(comp.accessory);
+                break;
+            case COMPONENT_TYPE_ACTION_ROW:
+                if (Array.isArray(comp.components)) for (const c of comp.components) walk(c);
+                break;
+            case COMPONENT_TYPE_MEDIA_GALLERY:
+                if (Array.isArray(comp.items) && comp.items.length > 0) out.hasImage = true;
+                break;
+            case COMPONENT_TYPE_THUMBNAIL:
+                if (comp.media && (comp.media.url || comp.media.proxy_url || comp.media.proxyURL)) out.hasImage = true;
+                break;
+            case COMPONENT_TYPE_FILE:
+                out.hasAttachment = true;
+                if (comp.file && typeof comp.file.url === 'string' && /\.(png|jpe?g|gif|webp|bmp|svg|mp4|webm|mov)(\?|$)/i.test(comp.file.url)) out.hasImage = true;
+                break;
+            default:
+                if (Array.isArray(comp.components)) for (const c of comp.components) walk(c);
+                break;
+        }
+    };
+    if (Array.isArray(message.components)) for (const c of message.components) walk(c);
+
+    return out;
+}
+
+function buildSlashCommandData(message) {
     const interaction = message?.interaction;
     const metadata = message?.interactionMetadata;
     const optsRaw = message?.interactionOptions || interaction?.options;
-    // Build command path: /cmd group? subcommand? plus key:value options
-    if (!optsRaw && !metadata) return null;
+    if (!interaction && !metadata) return null;
 
-    const opts = Array.isArray(optsRaw) ? optsRaw : [];
-    let cmdParts = [interaction?.commandName || '?'];
-    let valueOpts = opts;
+    let cmdParts = [interaction?.commandName || metadata?.name || '?'];
+    let valueOpts = Array.isArray(optsRaw) ? optsRaw : [];
 
-    // Detect subcommand groups: nested option structure { type:2/1 (group/subcommand), name, options }
+    // Walk subcommand-group → subcommand nesting.
     for (let i = 0; i < 2; i++) {
         if (valueOpts.length === 1 && valueOpts[0] && (valueOpts[0].type === 1 || valueOpts[0].type === 2)) {
             cmdParts.push(valueOpts[0].name);
             valueOpts = Array.isArray(valueOpts[0].options) ? valueOpts[0].options : [];
         }
     }
-    // Filter out autocomplete-only `focused` options
     valueOpts = valueOpts.filter((o) => o && !o.focused);
 
-    if (!valueOpts.length && cmdParts.length === 1 && !metadata) return null;
-
-    const triggeredBy = metadata?.user || interaction?.user;
+    const triggeredBy = metadata?.user || interaction?.user || null;
+    const opts = valueOpts.map((o) => ({
+        name: String(o.name ?? ''),
+        value: o.value == null ? '' : String(o.value),
+        type: typeof o.type === 'number' ? o.type : null,
+    }));
 
-    return (0, jsx_runtime_1.jsxs)("div", { className: "dht-slash-options", children: [
-        (0, jsx_runtime_1.jsx)("span", { className: "dht-slash-cmd-name", children: '/' + cmdParts.filter(Boolean).join(' ') }),
-        valueOpts.map((o, i) => (0, jsx_runtime_1.jsxs)("span", { className: "dht-slash-opt", children: [
-            (0, jsx_runtime_1.jsxs)("span", { className: "dht-slash-opt-name", children: [String(o.name), ':'] }),
-            ' ',
-            (0, jsx_runtime_1.jsx)("span", { className: "dht-slash-opt-val", children: String(o.value ?? '') })
-        ] }, i)),
-        triggeredBy && (0, jsx_runtime_1.jsxs)("span", { className: "dht-slash-opt", children: ['by ', (0, jsx_runtime_1.jsx)("strong", { children: triggeredBy.displayName || triggeredBy.username || triggeredBy.id })] })
-    ] });
+    return {
+        cmd: '/' + cmdParts.filter(Boolean).join(' '),
+        opts,
+        by: triggeredBy ? (triggeredBy.displayName || triggeredBy.username || triggeredBy.id || '') : '',
+        byId: triggeredBy ? (triggeredBy.id || '') : '',
+    };
 }
 
 function renderEditHistory(history, context) {