@farming-labs/svelte-theme 0.2.35 → 0.2.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.2.35",
+  "version": "0.2.37",
   "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -122,8 +122,8 @@
   "dependencies": {
     "gray-matter": "^4.0.3",
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.2.35",
-    "@farming-labs/svelte": "0.2.35"
+    "@farming-labs/svelte": "0.2.37",
+    "@farming-labs/docs": "0.2.37"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/lib/renderMarkdown.js

@@ -1,16 +1,39 @@
 /**
- * Markdown renderer for AI chat — exact port of the Next.js fumadocs version.
+ * Markdown renderer for AI chat.
  *
  * Uses sugar-high for syntax highlighting in code blocks.
- * Supports: fenced code blocks, tables, inline code, bold, italic,
- * links, headings, bullet lists, numbered lists.
+ * Supports fenced and streaming code blocks, loose language labels emitted by
+ * models, tables, inline code, emphasis, links, images, headings, blockquotes,
+ * horizontal rules, and lists.
  */
 import { highlight } from "sugar-high";
 
+const codeBlockTokenBoundary = String.fromCharCode(0);
+
+const looseCodeLanguageAliases = new Map([
+  ["bash", "bash"],
+  ["shell", "bash"],
+  ["sh", "bash"],
+  ["zsh", "bash"],
+  ["curl", "bash"],
+  ["javascript", "js"],
+  ["js", "js"],
+  ["typescript", "ts"],
+  ["ts", "ts"],
+  ["json", "json"],
+  ["python", "python"],
+  ["py", "python"],
+  ["http", "http"],
+]);
+
 function escapeHtml(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 
+function escapeEscapedAttribute(s) {
+  return s.replace(/"/g, "&quot;");
+}
+
 function buildCodeBlock(lang, code) {
   const trimmed = code.replace(/\n$/, "");
   const highlighted = highlight(trimmed).replace(/<\/span>\n<span/g, "</span><span");
@@ -24,102 +47,410 @@ function buildCodeBlock(lang, code) {
   );
 }
 
-function isTableRow(line) {
+function getCodeFenceOpening(line) {
+  const match = /^(?: {0,3})(`{3,}|~{3,})(.*)$/.exec(line);
+  if (!match) return null;
+
+  const marker = match[1];
+  const rawInfo = match[2] ?? "";
+  if (!marker) return null;
+  if (marker.startsWith("`") && rawInfo.includes("`")) return null;
+
+  return {
+    markerChar: marker[0],
+    markerLength: marker.length,
+    lang: extractCodeFenceLanguage(rawInfo),
+  };
+}
+
+function isCodeFenceClosing(line, fence) {
   const trimmed = line.trim();
-  return trimmed.startsWith("|") && trimmed.endsWith("|") && trimmed.includes("|");
+  if (trimmed.length < fence.markerLength) return false;
+
+  for (const char of trimmed) {
+    if (char !== fence.markerChar) return false;
+  }
+
+  return true;
 }
 
-function isTableSeparator(line) {
-  return /^\|[\s:]*-+[\s:]*(\|[\s:]*-+[\s:]*)*\|$/.test(line.trim());
+function extractCodeFenceLanguage(rawInfo) {
+  const firstToken = rawInfo.trim().split(/\s+/, 1)[0] ?? "";
+  return firstToken
+    .replace(/^\{\.?/, "")
+    .replace(/^\./, "")
+    .replace(/[},].*$/, "");
 }
 
-function renderTable(rows) {
-  const parseRow = (row) =>
-    row
-      .trim()
-      .replace(/^\|/, "")
-      .replace(/\|$/, "")
-      .split("|")
-      .map((c) => c.trim());
+function normalizeLooseCodeBlocks(text) {
+  const lines = text.split("\n");
+  const output = [];
+  let i = 0;
 
-  const headerCells = parseRow(rows[0]);
-  const thead = `<thead><tr>${headerCells.map((c) => `<th>${c}</th>`).join("")}</tr></thead>`;
+  while (i < lines.length) {
+    const lang = getLooseCodeLanguage(lines[i]);
+    if (!lang) {
+      output.push(lines[i]);
+      i += 1;
+      continue;
+    }
 
-  const bodyRows = rows
-    .slice(1)
-    .map((row) => {
-      const cells = parseRow(row);
-      return `<tr>${cells.map((c) => `<td>${c}</td>`).join("")}</tr>`;
-    })
-    .join("");
+    const start = nextNonEmptyLineIndex(lines, i + 1);
+    if (start < 0 || !looksLikeLooseCodeLine(lines[start], lang)) {
+      output.push(lines[i]);
+      i += 1;
+      continue;
+    }
 
-  return `<div class="fd-table-wrapper relative overflow-auto prose-no-margin my-6"><table>${thead}<tbody>${bodyRows}</tbody></table></div>`;
+    output.push(`\`\`\`${lang}`);
+    let j = start;
+    while (j < lines.length) {
+      if (j > start && isLooseCodeBoundary(lines, j, lang)) break;
+      output.push(lines[j]);
+      j += 1;
+    }
+    output.push("```");
+    i = j;
+  }
+
+  return output.join("\n");
+}
+
+function getLooseCodeLanguage(line) {
+  const raw = line.trim().toLowerCase();
+  if (!/^[a-z][\w#+.-]*$/.test(raw)) return null;
+  return looseCodeLanguageAliases.get(raw) ?? null;
+}
+
+function nextNonEmptyLineIndex(lines, startIndex) {
+  for (let i = startIndex; i < lines.length; i += 1) {
+    if (lines[i].trim()) return i;
+  }
+  return -1;
+}
+
+function isLooseCodeBoundary(lines, index, lang) {
+  const line = lines[index];
+  const trimmed = line.trim();
+  if (getHeading(trimmed) || isHorizontalRule(trimmed)) return true;
+
+  if (!trimmed) {
+    const next = nextNonEmptyLineIndex(lines, index + 1);
+    return next < 0 || !looksLikeLooseCodeLine(lines[next], lang);
+  }
+
+  return false;
+}
+
+function looksLikeLooseCodeLine(line, lang) {
+  const trimmed = line.trim();
+  if (!trimmed) return false;
+
+  if (lang === "json") return /^[{[]/.test(trimmed);
+  if (lang === "js" || lang === "ts") {
+    return /^(?:import|export|const|let|var|function|async|await|class|type|interface|return|console\.|fetch\(|npm|pnpm|yarn|bun)\b/.test(
+      trimmed,
+    );
+  }
+  if (lang === "python") {
+    return /^(?:from|import|def|class|if|for|while|print\(|python|pip)\b/.test(trimmed);
+  }
+  if (lang === "http") return /^(?:GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)\s+\S+/.test(trimmed);
+
+  return /^(?:[$>#]\s*)?(?:claude|opencode|curl|npx|pnpm|npm|yarn|bun|git|node|deno|python|pip|export|cd|cat|echo|mkdir|touch|rm|cp|mv|vercel|docs)\b|^(?:--|\||&&|\\)|^[A-Z_][A-Z0-9_]*=/.test(
+    trimmed,
+  );
+}
+
+function replaceFencedCodeBlocks(text, codeBlocks) {
+  const lines = text.split("\n");
+  const output = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const fence = getCodeFenceOpening(lines[i]);
+    if (!fence) {
+      output.push(lines[i]);
+      i += 1;
+      continue;
+    }
+
+    const codeLines = [];
+    i += 1;
+
+    while (i < lines.length && !isCodeFenceClosing(lines[i], fence)) {
+      codeLines.push(lines[i]);
+      i += 1;
+    }
+
+    if (i < lines.length) i += 1;
+
+    codeBlocks.push(buildCodeBlock(fence.lang, codeLines.join("\n")));
+    output.push(`${codeBlockTokenBoundary}CB${codeBlocks.length - 1}${codeBlockTokenBoundary}`);
+  }
+
+  return output.join("\n");
 }
 
 export function renderMarkdown(text) {
   if (!text) return "";
 
-  const codeBlockTokenBoundary = String.fromCharCode(0);
-  const codeBlockTokenPattern = new RegExp(
-    `${codeBlockTokenBoundary}CB(\\d+)${codeBlockTokenBoundary}`,
-    "g",
-  );
   const codeBlocks = [];
+  const processed = replaceFencedCodeBlocks(normalizeLooseCodeBlocks(text), codeBlocks);
 
-  // Complete fences: ```lang\n...\n```
-  let processed = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
-    codeBlocks.push(buildCodeBlock(lang, code));
-    return `\x00CB${codeBlocks.length - 1}\x00`;
-  });
-
-  // Incomplete fence (streaming): opening ``` with no closing one
-  processed = processed.replace(/```(\w*)\n([\s\S]*)$/, (_match, lang, code) => {
-    codeBlocks.push(buildCodeBlock(lang, code));
-    return `\x00CB${codeBlocks.length - 1}\x00`;
-  });
+  return renderMarkdownBlocks(processed, codeBlocks);
+}
 
-  const lines = processed.split("\n");
+function renderMarkdownBlocks(text, codeBlocks) {
+  const lines = text.split("\n");
   const output = [];
   let i = 0;
 
   while (i < lines.length) {
-    if (isTableRow(lines[i]) && i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
-      const tableLines = [lines[i]];
-      i++; // separator
-      i++; // move past separator
+    const line = lines[i];
+    const trimmed = line.trim();
+
+    if (!trimmed) {
+      i += 1;
+      continue;
+    }
+
+    const codeBlockIndex = getCodeBlockTokenIndex(trimmed);
+    if (codeBlockIndex !== null) {
+      output.push(codeBlocks[codeBlockIndex] ?? "");
+      i += 1;
+      continue;
+    }
+
+    if (isHorizontalRule(trimmed)) {
+      output.push('<hr class="fd-ai-hr" />');
+      i += 1;
+      continue;
+    }
+
+    const setextHeading = getSetextHeading(lines, i);
+    if (setextHeading) {
+      output.push(
+        `<h${setextHeading.level}>${renderInlineMarkdown(setextHeading.text)}</h${setextHeading.level}>`,
+      );
+      i += 2;
+      continue;
+    }
+
+    const heading = getHeading(trimmed);
+    if (heading) {
+      output.push(`<h${heading.level}>${renderInlineMarkdown(heading.text)}</h${heading.level}>`);
+      i += 1;
+      continue;
+    }
+
+    const blockquote = collectBlockquote(lines, i);
+    if (blockquote) {
+      output.push(
+        `<blockquote>${renderMarkdownBlocks(blockquote.lines.join("\n"), codeBlocks)}</blockquote>`,
+      );
+      i = blockquote.nextIndex;
+      continue;
+    }
+
+    if (isTableRow(line) && i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
+      const tableLines = [line];
+      i += 2;
       while (i < lines.length && isTableRow(lines[i])) {
         tableLines.push(lines[i]);
-        i++;
+        i += 1;
       }
       output.push(renderTable(tableLines));
       continue;
     }
-    output.push(lines[i]);
-    i++;
+
+    const unorderedItems = collectListItems(lines, i, "unordered");
+    if (unorderedItems) {
+      output.push(`<ul>${unorderedItems.items.map((item) => renderListItem(item)).join("")}</ul>`);
+      i = unorderedItems.nextIndex;
+      continue;
+    }
+
+    const orderedItems = collectListItems(lines, i, "ordered");
+    if (orderedItems) {
+      output.push(`<ol>${orderedItems.items.map((item) => renderListItem(item)).join("")}</ol>`);
+      i = orderedItems.nextIndex;
+      continue;
+    }
+
+    const paragraphLines = [];
+    while (i < lines.length && lines[i].trim() && !isMarkdownBlockStart(lines, i)) {
+      paragraphLines.push(lines[i].trim());
+      i += 1;
+    }
+
+    output.push(
+      `<p>${paragraphLines.map((paragraphLine) => renderInlineMarkdown(paragraphLine)).join("<br>")}</p>`,
+    );
+  }
+
+  return output.join("");
+}
+
+function getCodeBlockTokenIndex(line) {
+  const prefix = `${codeBlockTokenBoundary}CB`;
+  if (!line.startsWith(prefix) || !line.endsWith(codeBlockTokenBoundary)) return null;
+
+  const rawIndex = line.slice(prefix.length, -codeBlockTokenBoundary.length);
+  if (!/^\d+$/.test(rawIndex)) return null;
+
+  return Number(rawIndex);
+}
+
+function getHeading(line) {
+  const match = /^(#{1,6})[ \t]+(.+?)(?:[ \t]+#+[ \t]*)?$/.exec(line);
+  if (!match) return null;
+
+  return {
+    level: match[1].length,
+    text: match[2],
+  };
+}
+
+function getSetextHeading(lines, index) {
+  if (index + 1 >= lines.length) return null;
+
+  const text = lines[index].trim();
+  const underline = lines[index + 1].trim();
+  if (!text || !/^(?:=+|-+)$/.test(underline)) return null;
+  if (getHeading(text) || isHorizontalRule(text) || isBlockquoteStart(text)) return null;
+  if (isTableRow(lines[index])) return null;
+  if (collectListItems(lines, index, "unordered") || collectListItems(lines, index, "ordered"))
+    return null;
+
+  return {
+    level: underline.startsWith("=") ? 1 : 2,
+    text,
+  };
+}
+
+function collectBlockquote(lines, startIndex) {
+  if (!isBlockquoteStart(lines[startIndex])) return null;
+
+  const quoteLines = [];
+  let i = startIndex;
+
+  while (i < lines.length) {
+    const match = /^(?: {0,3})>\s?(.*)$/.exec(lines[i]);
+    if (!match) break;
+
+    quoteLines.push(match[1]);
+    i += 1;
   }
 
-  let result = output.join("\n");
+  return quoteLines.length > 0 ? { lines: quoteLines, nextIndex: i } : null;
+}
+
+function isBlockquoteStart(line) {
+  return /^(?: {0,3})>/.test(line);
+}
+
+function collectListItems(lines, startIndex, type) {
+  const pattern = type === "ordered" ? /^(?: {0,3})\d+\.\s+(.+)$/ : /^(?: {0,3})[-*+]\s+(.+)$/;
+  const items = [];
+  let i = startIndex;
+
+  while (i < lines.length) {
+    const match = pattern.exec(lines[i]);
+    if (!match) break;
+
+    items.push(match[1]);
+    i += 1;
+  }
+
+  return items.length > 0 ? { items, nextIndex: i } : null;
+}
+
+function renderListItem(item) {
+  const task = /^\[([ xX])\]\s+(.+)$/.exec(item);
+  if (!task) return `<li>${renderInlineMarkdown(item)}</li>`;
+
+  const checked = task[1].toLowerCase() === "x" ? " checked" : "";
+  return `<li class="fd-ai-task-list-item"><input class="fd-ai-task-checkbox" type="checkbox" disabled${checked}>${renderInlineMarkdown(task[2])}</li>`;
+}
+
+function isMarkdownBlockStart(lines, index) {
+  const line = lines[index];
+  const trimmed = line.trim();
+
+  return (
+    getCodeBlockTokenIndex(trimmed) !== null ||
+    isHorizontalRule(trimmed) ||
+    Boolean(getSetextHeading(lines, index)) ||
+    Boolean(getHeading(trimmed)) ||
+    isBlockquoteStart(line) ||
+    (isTableRow(line) && index + 1 < lines.length && isTableSeparator(lines[index + 1])) ||
+    Boolean(collectListItems(lines, index, "unordered")) ||
+    Boolean(collectListItems(lines, index, "ordered"))
+  );
+}
+
+function renderInlineMarkdown(text) {
+  const inlineCodeTokens = [];
+  let result = escapeHtml(text).replace(/`([^`]+)`/g, (_match, code) => {
+    inlineCodeTokens.push(`<code>${code}</code>`);
+    return `${codeBlockTokenBoundary}IC${inlineCodeTokens.length - 1}${codeBlockTokenBoundary}`;
+  });
 
   result = result
-    .replace(/`([^`]+)`/g, "<code>$1</code>")
     .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+    .replace(/__(.*?)__/g, "<strong>$1</strong>")
+    .replace(/~~(.*?)~~/g, "<del>$1</del>")
     .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>")
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
-    .replace(/^### (.*$)/gm, "<h4>$1</h4>")
-    .replace(/^## (.*$)/gm, "<h3>$1</h3>")
-    .replace(/^# (.*$)/gm, "<h2>$1</h2>")
-    .replace(
-      /^[-*] (.*$)/gm,
-      '<div style="display:flex;gap:8px;padding:2px 0"><span style="opacity:0.5">\u2022</span><span>$1</span></div>',
-    )
-    .replace(
-      /^(\d+)\. (.*$)/gm,
-      '<div style="display:flex;gap:8px;padding:2px 0"><span style="opacity:0.5">$1.</span><span>$2</span></div>',
-    )
-    .replace(/\n\n/g, '<div style="height:8px"></div>')
-    .replace(/\n/g, "<br>");
-
-  result = result.replace(codeBlockTokenPattern, (_m, idx) => codeBlocks[Number(idx)]);
-
-  return result;
+    .replace(/(?<!_)_([^_]+)_(?!_)/g, "<em>$1</em>")
+    .replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+&quot;[^)]*&quot;)?\)/g, (_match, alt, src) => {
+      return `<img src="${escapeEscapedAttribute(src)}" alt="${escapeEscapedAttribute(alt)}" loading="lazy">`;
+    })
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, label, href) => {
+      return `<a href="${escapeEscapedAttribute(href)}">${label}</a>`;
+    })
+    .replace(/&lt;(https?:\/\/[^<>\s]+)&gt;/g, (_match, href) => {
+      return `<a href="${escapeEscapedAttribute(href)}">${href}</a>`;
+    });
+
+  return result.replace(
+    new RegExp(`${codeBlockTokenBoundary}IC(\\d+)${codeBlockTokenBoundary}`, "g"),
+    (_match, idx) => inlineCodeTokens[Number(idx)] ?? "",
+  );
+}
+
+function isHorizontalRule(line) {
+  return /^(?:-{3,}|\*{3,}|_{3,})$/.test(line);
+}
+
+function isTableRow(line) {
+  const trimmed = line.trim();
+  return trimmed.startsWith("|") && trimmed.endsWith("|") && trimmed.includes("|");
+}
+
+function isTableSeparator(line) {
+  return /^\|[\s:]*-+[\s:]*(\|[\s:]*-+[\s:]*)*\|$/.test(line.trim());
+}
+
+function renderTable(rows) {
+  const parseRow = (row) =>
+    row
+      .trim()
+      .replace(/^\|/, "")
+      .replace(/\|$/, "")
+      .split("|")
+      .map((c) => c.trim());
+
+  const headerCells = parseRow(rows[0]);
+  const thead = `<thead><tr>${headerCells.map((c) => `<th>${renderInlineMarkdown(c)}</th>`).join("")}</tr></thead>`;
+
+  const bodyRows = rows
+    .slice(1)
+    .map((row) => {
+      const cells = parseRow(row);
+      return `<tr>${cells.map((c) => `<td>${renderInlineMarkdown(c)}</td>`).join("")}</tr>`;
+    })
+    .join("");
+
+  return `<div class="fd-table-wrapper relative overflow-auto prose-no-margin my-6"><table>${thead}<tbody>${bodyRows}</tbody></table></div>`;
 }

package/styles/docs.css

@@ -2634,20 +2634,38 @@ html.dark #nd-docs-layout pre.shiki {
   font-size: inherit;
 }
 
+#nd-docs-layout .fd-ai-bubble-ai .fd-table-wrapper {
+  margin: 8px 0;
+  overflow: auto;
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--radius, 6px);
+}
+
 #nd-docs-layout .fd-ai-bubble-ai table {
   width: 100%;
-  border-collapse: collapse;
-  margin: 8px 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 0;
   font-size: 13px;
 }
 
 #nd-docs-layout .fd-ai-bubble-ai th,
 #nd-docs-layout .fd-ai-bubble-ai td {
-  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  border: 0;
+  border-right: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
   padding: 6px 12px;
   text-align: left;
 }
 
+#nd-docs-layout .fd-ai-bubble-ai tr > :last-child {
+  border-right: 0;
+}
+
+#nd-docs-layout .fd-ai-bubble-ai tbody tr:last-child td {
+  border-bottom: 0;
+}
+
 #nd-docs-layout .fd-ai-bubble-ai th {
   background: var(--color-fd-muted, #1a1a2e);
   font-weight: 600;
@@ -2656,9 +2674,24 @@ html.dark #nd-docs-layout pre.shiki {
 
 /* ─── Markdown prose inside AI bubbles (panel/modal/popover) ─────── */
 
+#nd-docs-layout .fd-ai-bubble-ai h1,
+#nd-docs-layout .fd-ai-bubble-ai h2,
+#nd-docs-layout .fd-ai-bubble-ai h3,
+#nd-docs-layout .fd-ai-bubble-ai h4,
+#nd-docs-layout .fd-ai-bubble-ai h5,
+#nd-docs-layout .fd-ai-bubble-ai h6 {
+  font-weight: 600;
+  color: var(--color-fd-foreground, #e4e4e7);
+}
+
+#nd-docs-layout .fd-ai-bubble-ai h1 {
+  font-size: 1.25rem;
+  margin: 14px 0 7px;
+  line-height: 1.25;
+}
+
 #nd-docs-layout .fd-ai-bubble-ai h2 {
   font-size: 1.125rem;
-  font-weight: 600;
   margin: 12px 0 6px;
   line-height: 1.3;
 }
@@ -2672,11 +2705,17 @@ html.dark #nd-docs-layout pre.shiki {
 
 #nd-docs-layout .fd-ai-bubble-ai h4 {
   font-size: 0.9375rem;
-  font-weight: 600;
   margin: 8px 0 4px;
   line-height: 1.4;
 }
 
+#nd-docs-layout .fd-ai-bubble-ai h5,
+#nd-docs-layout .fd-ai-bubble-ai h6 {
+  font-size: 0.8125rem;
+  margin: 8px 0 4px;
+  line-height: 1.45;
+}
+
 #nd-docs-layout .fd-ai-bubble-ai strong {
   font-weight: 600;
   color: var(--color-fd-foreground, #e4e4e7);
@@ -2696,6 +2735,58 @@ html.dark #nd-docs-layout pre.shiki {
   margin-top: 2px;
 }
 
+#nd-docs-layout .fd-ai-bubble-ai ul,
+#nd-docs-layout .fd-ai-bubble-ai ol {
+  margin: 6px 0 8px;
+  padding-left: 1.25rem;
+}
+
+#nd-docs-layout .fd-ai-bubble-ai li {
+  margin: 3px 0;
+}
+
+#nd-docs-layout .fd-ai-bubble-ai blockquote {
+  margin: 8px 0;
+  padding: 6px 0 6px 12px;
+  border-left: 2px solid var(--color-fd-border, rgba(255, 255, 255, 0.16));
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+}
+
+#nd-docs-layout .fd-ai-bubble-ai blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+#nd-docs-layout .fd-ai-bubble-ai .fd-ai-hr {
+  margin: 12px 0;
+  border: none;
+  border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
+}
+
+#nd-docs-layout .fd-ai-bubble-ai del {
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+}
+
+#nd-docs-layout .fd-ai-bubble-ai .fd-ai-task-list-item {
+  list-style: none;
+}
+
+#nd-docs-layout .fd-ai-bubble-ai .fd-ai-task-checkbox {
+  width: 0.875rem;
+  height: 0.875rem;
+  margin: 0 0.45rem 0 -1.25rem;
+  vertical-align: -0.12em;
+  accent-color: var(--color-fd-primary, #6366f1);
+}
+
+#nd-docs-layout .fd-ai-bubble-ai img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 8px 0;
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
+  border-radius: var(--radius, 4px);
+}
+
 #nd-docs-layout .fd-ai-bubble-ai pre {
   margin: 8px 0;
   border-radius: 0;
@@ -3100,20 +3191,38 @@ html.dark #nd-docs-layout pre.shiki {
   text-decoration: underline;
 }
 
+#nd-docs-layout .fd-ai-fm-msg-content .fd-table-wrapper {
+  margin: 8px 0;
+  overflow: auto;
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--radius, 6px);
+}
+
 #nd-docs-layout .fd-ai-fm-msg-content table {
   width: 100%;
-  border-collapse: collapse;
-  margin: 8px 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 0;
   font-size: 13px;
 }
 
 #nd-docs-layout .fd-ai-fm-msg-content th,
 #nd-docs-layout .fd-ai-fm-msg-content td {
-  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  border: 0;
+  border-right: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
   padding: 6px 12px;
   text-align: left;
 }
 
+#nd-docs-layout .fd-ai-fm-msg-content tr > :last-child {
+  border-right: 0;
+}
+
+#nd-docs-layout .fd-ai-fm-msg-content tbody tr:last-child td {
+  border-bottom: 0;
+}
+
 #nd-docs-layout .fd-ai-fm-msg-content th {
   background: var(--color-fd-muted, #1a1a2e);
   font-weight: 600;
@@ -3122,9 +3231,24 @@ html.dark #nd-docs-layout pre.shiki {
 
 /* ─── Markdown prose inside full-modal messages ──────────────────── */
 
+#nd-docs-layout .fd-ai-fm-msg-content h1,
+#nd-docs-layout .fd-ai-fm-msg-content h2,
+#nd-docs-layout .fd-ai-fm-msg-content h3,
+#nd-docs-layout .fd-ai-fm-msg-content h4,
+#nd-docs-layout .fd-ai-fm-msg-content h5,
+#nd-docs-layout .fd-ai-fm-msg-content h6 {
+  font-weight: 600;
+  color: var(--color-fd-foreground, #e4e4e7);
+}
+
+#nd-docs-layout .fd-ai-fm-msg-content h1 {
+  font-size: 1.375rem;
+  margin: 18px 0 9px;
+  line-height: 1.25;
+}
+
 #nd-docs-layout .fd-ai-fm-msg-content h2 {
   font-size: 1.25rem;
-  font-weight: 600;
   margin: 16px 0 8px;
   line-height: 1.3;
 }
@@ -3138,11 +3262,17 @@ html.dark #nd-docs-layout pre.shiki {
 
 #nd-docs-layout .fd-ai-fm-msg-content h4 {
   font-size: 1rem;
-  font-weight: 600;
   margin: 10px 0 4px;
   line-height: 1.4;
 }
 
+#nd-docs-layout .fd-ai-fm-msg-content h5,
+#nd-docs-layout .fd-ai-fm-msg-content h6 {
+  font-size: 0.875rem;
+  margin: 10px 0 4px;
+  line-height: 1.45;
+}
+
 #nd-docs-layout .fd-ai-fm-msg-content strong {
   font-weight: 600;
   color: var(--color-fd-foreground, #e4e4e7);
@@ -3162,6 +3292,58 @@ html.dark #nd-docs-layout pre.shiki {
   margin-top: 2px;
 }
 
+#nd-docs-layout .fd-ai-fm-msg-content ul,
+#nd-docs-layout .fd-ai-fm-msg-content ol {
+  margin: 8px 0 10px;
+  padding-left: 1.35rem;
+}
+
+#nd-docs-layout .fd-ai-fm-msg-content li {
+  margin: 4px 0;
+}
+
+#nd-docs-layout .fd-ai-fm-msg-content blockquote {
+  margin: 10px 0;
+  padding: 7px 0 7px 14px;
+  border-left: 2px solid var(--color-fd-border, rgba(255, 255, 255, 0.16));
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+}
+
+#nd-docs-layout .fd-ai-fm-msg-content blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+#nd-docs-layout .fd-ai-fm-msg-content .fd-ai-hr {
+  margin: 14px 0;
+  border: none;
+  border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
+}
+
+#nd-docs-layout .fd-ai-fm-msg-content del {
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+}
+
+#nd-docs-layout .fd-ai-fm-msg-content .fd-ai-task-list-item {
+  list-style: none;
+}
+
+#nd-docs-layout .fd-ai-fm-msg-content .fd-ai-task-checkbox {
+  width: 0.9rem;
+  height: 0.9rem;
+  margin: 0 0.5rem 0 -1.35rem;
+  vertical-align: -0.12em;
+  accent-color: var(--color-fd-primary, #6366f1);
+}
+
+#nd-docs-layout .fd-ai-fm-msg-content img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 10px 0;
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
+  border-radius: var(--radius, 4px);
+}
+
 #nd-docs-layout .fd-ai-fm-msg-content pre {
   margin: 8px 0;
   border-radius: 0;