pi-interview 0.6.1 → 0.6.2

package/README.md

@@ -139,26 +139,26 @@ await interview({
 | `id` | string | Unique identifier |
 | `type` | string | `single`, `multi`, `text`, `image`, or `info` |
 | `question` | string | Question text |
-| `options` | string[] or object[] | Choices (required for single/multi). Can be strings or `{ label, code? }` objects |
+| `options` | string[] or object[] | Choices (required for single/multi). Can be strings or `{ label, content? }` objects |
 | `recommended` | string or string[] | Shows "Recommended" badge and pre-selects option(s) |
 | `conviction` | string | `"strong"` or `"slight"`. Slight opts out of pre-selection. Requires `recommended` |
 | `weight` | string | `"critical"` (prominent card) or `"minor"` (compact card) |
 | `context` | string | Help text shown below question |
-| `codeBlock` | object | Code block displayed below question text |
+| `content` | object | Content block displayed below question text (`lang: "md"|"markdown"` previews Markdown by default) |
 | `media` | object or object[] | Media content: image, chart, mermaid, table, or html |
 
-### Code Blocks
+### Content Blocks
 
-Questions and options can include code blocks for displaying code snippets, diffs, and file references.
+Questions and options can include `content` blocks for code snippets, diffs, and Markdown.
 
-**Question-level code block** (displayed above options):
+**Question-level code content** (displayed above options):
 ```json
 {
   "id": "review",
   "type": "single",
   "question": "Review this implementation",
-  "codeBlock": {
-    "code": "function add(a, b) {\n  return a + b;\n}",
+  "content": {
+    "source": "function add(a, b) {\n  return a + b;\n}",
     "lang": "ts",
     "file": "src/math.ts",
     "lines": "10-12",
@@ -168,44 +168,59 @@ Questions and options can include code blocks for displaying code snippets, diff
 }
 ```
 
-**Options with code blocks**:
+**Options with content blocks**:
 ```json
 {
   "options": [
     {
       "label": "Use async/await",
-      "code": { "code": "const data = await fetch(url);", "lang": "ts" }
+      "content": { "source": "const data = await fetch(url);", "lang": "ts" }
     },
     {
       "label": "Use promises",
-      "code": { "code": "fetch(url).then(data => ...);", "lang": "ts" }
+      "content": { "source": "fetch(url).then(data => ...);", "lang": "ts" }
     },
     "Keep current implementation"
   ]
 }
 ```
 
-**Diff display** (set `lang: "diff"`):
+**Diff display** (`lang: "diff"`):
 ```json
 {
-  "codeBlock": {
-    "code": "--- a/file.ts\n+++ b/file.ts\n@@ -1,3 +1,4 @@\n const x = 1;\n+const y = 2;\n const z = 3;",
+  "content": {
+    "source": "--- a/file.ts\n+++ b/file.ts\n@@ -1,3 +1,4 @@\n const x = 1;\n+const y = 2;\n const z = 3;",
     "lang": "diff",
     "file": "src/file.ts"
   }
 }
 ```
 
-| CodeBlock Field | Type | Description |
-|-----------------|------|-------------|
-| `code` | string | The code content (required) |
-| `lang` | string | Language for display (e.g., "ts", "diff") |
-| `file` | string | File path to display in header |
-| `lines` | string | Line range to display (e.g., "10-25") |
-| `highlights` | number[] | Line numbers to highlight |
-| `title` | string | Optional title above code |
+**Markdown preview by default** (`lang: "md"` or `"markdown"`):
+```json
+{
+  "content": {
+    "source": "# Release notes\n\n- Added preview mode\n- Fixed wrapping",
+    "lang": "md"
+  }
+}
+```
 
-Line numbers are shown when `file` or `lines` is specified. Diff syntax (`+`/`-` lines) is automatically styled when `lang` is "diff".
+Set `showSource: true` on Markdown content to show raw Markdown instead of preview.
+
+| Content Field | Type | Description |
+|---------------|------|-------------|
+| `source` | string | Content text (required) |
+| `lang` | string | Language hint (e.g., `ts`, `diff`, `md`) |
+| `file` | string | File path shown in the header |
+| `lines` | string | Line range shown in the header (code content only) |
+| `highlights` | number[] | Line highlights (code content only) |
+| `title` | string | Optional title above content |
+| `showSource` | boolean | Markdown only: `true` forces raw source instead of preview |
+
+Rules:
+- `lang: "md"` or `"markdown"`: preview by default, `showSource: true` shows raw source.
+- Any other `lang`: renders as raw source; `showSource` is not allowed.
 
 ### Info Panels
 

package/form/script.js

@@ -380,12 +380,16 @@
     el.textContent = text || "";
   }
 
-  function renderLightMarkdown(text) {
-    if (!text) return "";
-    let html = text
+  function escapeHtml(text) {
+    return String(text || "")
       .replace(/&/g, "&")
       .replace(/</g, "&lt;")
       .replace(/>/g, "&gt;");
+  }
+
+  function renderLightMarkdown(text) {
+    if (!text) return "";
+    let html = escapeHtml(text);
     html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
     html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
     html = html.replace(/\n/g, "<br>");
@@ -393,6 +397,118 @@
     return html;
   }
 
+  function isMarkdownLang(lang) {
+    if (typeof lang !== "string") return false;
+    const normalized = lang.trim().toLowerCase();
+    return normalized === "md" || normalized === "markdown";
+  }
+
+  function renderMarkdownPreviewFallback(markdown) {
+    const lines = String(markdown || "").replace(/\r\n?/g, "\n").split("\n");
+    const html = [];
+    const paragraph = [];
+    let listType = null;
+    let inFence = false;
+    let fenceLang = "";
+    let fenceLines = [];
+
+    const flushParagraph = () => {
+      if (paragraph.length === 0) return;
+      html.push(`<p>${renderLightMarkdown(paragraph.join(" "))}</p>`);
+      paragraph.length = 0;
+    };
+
+    const closeList = () => {
+      if (!listType) return;
+      html.push(listType === "ol" ? "</ol>" : "</ul>");
+      listType = null;
+    };
+
+    for (const rawLine of lines) {
+      const line = rawLine ?? "";
+
+      if (inFence) {
+        if (/^```/.test(line.trim())) {
+          html.push(`<pre class="markdown-fence"><code${fenceLang ? ` data-lang="${escapeHtml(fenceLang)}"` : ""}>${escapeHtml(fenceLines.join("\n"))}</code></pre>`);
+          inFence = false;
+          fenceLang = "";
+          fenceLines = [];
+        } else {
+          fenceLines.push(line);
+        }
+        continue;
+      }
+
+      const fenceStart = line.match(/^```\s*([^\s`]*)\s*$/);
+      if (fenceStart) {
+        flushParagraph();
+        closeList();
+        inFence = true;
+        fenceLang = fenceStart[1] || "";
+        fenceLines = [];
+        continue;
+      }
+
+      if (!line.trim()) {
+        flushParagraph();
+        closeList();
+        continue;
+      }
+
+      const headingMatch = line.match(/^\s{0,3}(#{1,6})\s+(.+)$/);
+      if (headingMatch) {
+        flushParagraph();
+        closeList();
+        const level = headingMatch[1].length;
+        html.push(`<h${level}>${renderLightMarkdown(headingMatch[2].trim())}</h${level}>`);
+        continue;
+      }
+
+      const quoteMatch = line.match(/^>\s?(.*)$/);
+      if (quoteMatch) {
+        flushParagraph();
+        closeList();
+        html.push(`<blockquote><p>${renderLightMarkdown(quoteMatch[1])}</p></blockquote>`);
+        continue;
+      }
+
+      const orderedMatch = line.match(/^\s*\d+\.\s+(.+)$/);
+      if (orderedMatch) {
+        flushParagraph();
+        if (listType !== "ol") {
+          closeList();
+          html.push("<ol>");
+          listType = "ol";
+        }
+        html.push(`<li>${renderLightMarkdown(orderedMatch[1])}</li>`);
+        continue;
+      }
+
+      const unorderedMatch = line.match(/^\s*[-*]\s+(.+)$/);
+      if (unorderedMatch) {
+        flushParagraph();
+        if (listType !== "ul") {
+          closeList();
+          html.push("<ul>");
+          listType = "ul";
+        }
+        html.push(`<li>${renderLightMarkdown(unorderedMatch[1])}</li>`);
+        continue;
+      }
+
+      closeList();
+      paragraph.push(line.trim());
+    }
+
+    if (inFence) {
+      html.push(`<pre class="markdown-fence"><code${fenceLang ? ` data-lang="${escapeHtml(fenceLang)}"` : ""}>${escapeHtml(fenceLines.join("\n"))}</code></pre>`);
+    }
+
+    flushParagraph();
+    closeList();
+    return html.join("\n");
+  }
+
   function getOptionLabel(option) {
     return typeof option === "string" ? option : option.label;
   }
@@ -430,22 +546,14 @@
     question.recommended = nextRecommended;
   }
 
-  function renderCodeBlock(block) {
-    if (!block || !block.code) return null;
+  function renderContentBlock(block) {
+    if (!block || !block.source) return null;
 
+    const markdownPreview = isMarkdownLang(block.lang) && block.showSource !== true;
     const container = document.createElement("div");
     container.className = "code-block";
-
-    const showLineNumbers = !!block.file || !!block.lines;
-    const isDiff = block.lang === "diff";
-    const lines = block.code.split("\n");
-    const highlights = new Set(block.highlights || []);
-    
-    // Parse starting line number from lines prop (e.g., "10-16" -> 10, "42" -> 42)
-    let startLineNum = 1;
-    if (block.lines) {
-      const match = block.lines.match(/^(\d+)/);
-      if (match) startLineNum = parseInt(match[1], 10);
+    if (markdownPreview) {
+      container.classList.add("markdown-content-block");
     }
 
     if (block.file || block.lines || block.lang || block.title) {
@@ -483,6 +591,25 @@
       container.appendChild(header);
     }
 
+    if (markdownPreview) {
+      const preview = document.createElement("div");
+      preview.className = "markdown-preview";
+      preview.innerHTML = renderMarkdownPreviewFallback(block.source);
+      container.appendChild(preview);
+      return container;
+    }
+
+    const showLineNumbers = !!block.file || !!block.lines;
+    const isDiff = block.lang === "diff";
+    const lines = block.source.split("\n");
+    const highlights = new Set(block.highlights || []);
+
+    let startLineNum = 1;
+    if (block.lines) {
+      const match = block.lines.match(/^(\d+)/);
+      if (match) startLineNum = parseInt(match[1], 10);
+    }
+
     const pre = document.createElement("pre");
     const code = document.createElement("code");
 
@@ -526,7 +653,7 @@
 
       code.appendChild(linesContainer);
     } else {
-      code.textContent = block.code;
+      code.textContent = block.source;
     }
 
     pre.appendChild(code);
@@ -1676,11 +1803,11 @@
       card.appendChild(context);
     }
 
-    if (question.codeBlock) {
-      const codeBlockEl = renderCodeBlock(question.codeBlock);
-      if (codeBlockEl) {
-        codeBlockEl.classList.add("question-code-block");
-        card.appendChild(codeBlockEl);
+    if (question.content) {
+      const contentBlockEl = renderContentBlock(question.content);
+      if (contentBlockEl) {
+        contentBlockEl.classList.add("question-code-block");
+        card.appendChild(contentBlockEl);
       }
     }
 
@@ -1726,11 +1853,11 @@
 
       question.options.forEach((option, optionIndex) => {
         const optionLabel = getOptionLabel(option);
-        const optionCode = isRichOption(option) ? option.code : null;
+        const optionContent = isRichOption(option) ? option.content : null;
 
         const label = document.createElement("label");
         label.className = "option-item";
-        if (optionCode) {
+        if (optionContent) {
           label.classList.add("has-code");
         }
 
@@ -1764,10 +1891,10 @@
         label.appendChild(input);
         label.appendChild(text);
 
-        if (optionCode) {
-          const codeBlockEl = renderCodeBlock(optionCode);
-          if (codeBlockEl) {
-            label.appendChild(codeBlockEl);
+        if (optionContent) {
+          const contentBlockEl = renderContentBlock(optionContent);
+          if (contentBlockEl) {
+            label.appendChild(contentBlockEl);
           }
         }
 

package/form/styles.css

@@ -1393,6 +1393,9 @@ button {
   padding: 0.75rem;
   overflow-x: hidden;
   line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .code-block code {
@@ -1400,6 +1403,91 @@ button {
   font-size: var(--font-size-code);
   background: none;
   padding: 0;
+  white-space: inherit;
+  overflow-wrap: inherit;
+  word-break: inherit;
+}
+
+.markdown-content-block .code-block-header {
+  border-bottom: 0;
+}
+
+.markdown-preview {
+  padding: 0.875rem;
+  display: grid;
+  gap: 0.625rem;
+  color: var(--fg);
+  line-height: 1.6;
+  text-wrap: pretty;
+}
+
+.markdown-preview > * {
+  margin: 0;
+}
+
+.markdown-preview h1,
+.markdown-preview h2,
+.markdown-preview h3,
+.markdown-preview h4,
+.markdown-preview h5,
+.markdown-preview h6 {
+  font-family: var(--font-display);
+  line-height: 1.2;
+  text-wrap: balance;
+}
+
+.markdown-preview h1 { font-size: 1.2rem; }
+.markdown-preview h2 { font-size: 1.1rem; }
+.markdown-preview h3 { font-size: 1rem; }
+
+.markdown-preview ul,
+.markdown-preview ol {
+  margin: 0;
+  padding-left: 1.25rem;
+  display: grid;
+  gap: 0.35rem;
+}
+
+.markdown-preview blockquote {
+  margin: 0;
+  padding-left: 0.75rem;
+  border-left: 3px solid var(--accent-muted);
+  color: var(--fg-muted);
+}
+
+.markdown-preview pre {
+  margin: 0;
+  padding: 0.75rem;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--bg-body) 90%, transparent);
+  border: 1px solid var(--border-muted);
+  overflow-x: auto;
+}
+
+.markdown-preview pre code {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-code);
+  white-space: pre;
+}
+
+.markdown-preview code {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  background: color-mix(in srgb, var(--bg-body) 80%, transparent);
+  padding: 0.1rem 0.3rem;
+  border-radius: 4px;
+}
+
+.markdown-preview a {
+  color: var(--accent);
+  text-underline-offset: 2px;
+}
+
+.markdown-preview p code,
+.markdown-preview li code,
+.markdown-preview blockquote code {
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 
 .code-block-lines-container {

package/index.ts

@@ -555,14 +555,14 @@ export default function (pi: ExtensionAPI) {
 			"Provides better UX than back-and-forth chat for structured input. " +
 			"Image responses and attachments are returned as file paths - use read tool directly to display them. " +
 			"Pass questions as inline JSON string directly (preferred) or as a path to a JSON file. " +
-			'Questions JSON format: { "title": "...", "description": "...", "questions": [{ "id": "q1", "type": "single|multi|text|image|info", "question": "...", "options": ["A", "B"], "codeBlock": { "code": "...", "lang": "ts" }, "media": { "type": "image|chart|mermaid|table|html", ... } }] }. ' +
-			"Options can be strings or objects: { label: string, code?: { code, lang?, file?, lines?, highlights? } }. " +
+			'Questions JSON format: { "title": "...", "description": "...", "questions": [{ "id": "q1", "type": "single|multi|text|image|info", "question": "...", "options": ["A", "B"], "content": { "source": "...", "lang": "ts" }, "media": { "type": "image|chart|mermaid|table|html", ... } }] }. ' +
+			"Options can be strings or objects: { label: string, content?: { source, lang?, file?, lines?, highlights?, title?, showSource? } }. " +
 			"Always set recommended with context explaining your reasoning. Recommended options show a 'Recommended' badge and are pre-selected for the user. " +
 			'Use conviction: "slight" when unsure (does NOT pre-select), conviction: "strong" when very confident (shows Recommended badge). ' +
 			"Omit conviction for normal recommendations (pre-selects). " +
 			'Use weight: "critical" for key decisions (visually prominent), weight: "minor" for low-stakes questions (compact card). ' +
 			"When questions have recommendations, set description to guide review (e.g., 'Review my suggestions and adjust as needed'). " +
-			"Questions can have a codeBlock field to display code above options. Types: single (radio), multi (checkbox), text (textarea), image (file upload), info (non-interactive). " +
+			"Questions can have a content field to display code or markdown above options. lang: \"md\" or \"markdown\" defaults to markdown preview unless showSource is true. Types: single (radio), multi (checkbox), text (textarea), image (file upload), info (non-interactive). " +
 			'Media blocks: { type: "image", src, alt, caption }, { type: "table", table: { headers, rows, highlights }, caption }, { type: "chart", chart: { type, data, options }, caption }, { type: "mermaid", mermaid: "graph LR\\n..." }, { type: "html", html }. ' +
 			"Info type is a non-interactive content panel for displaying context with media. Media position: above (default), below, side (two-column).",
 		promptSnippet:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-interview",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Interactive interview form extension for pi coding agent",
   "author": "Nico Bailon",
   "license": "MIT",

package/schema.ts

@@ -1,15 +1,28 @@
-export interface CodeBlock {
-	code: string;
+export interface BaseContentBlock {
+	source: string;
 	lang?: string;
 	file?: string;
+	title?: string;
+}
+
+export interface MarkdownContentBlock extends BaseContentBlock {
+	lang: "md" | "markdown";
+	showSource?: boolean;
+	lines?: never;
+	highlights?: never;
+}
+
+export interface CodeContentBlock extends BaseContentBlock {
 	lines?: string;
 	highlights?: number[];
-	title?: string;
+	showSource?: never;
 }
 
+export type ContentBlock = MarkdownContentBlock | CodeContentBlock;
+
 export interface RichOption {
 	label: string;
-	code?: CodeBlock;
+	content?: ContentBlock;
 }
 
 export type OptionValue = string | RichOption;
@@ -44,7 +57,7 @@ export interface Question {
 	conviction?: "strong" | "slight";
 	weight?: "critical" | "minor";
 	context?: string;
-	codeBlock?: CodeBlock;
+	content?: ContentBlock;
 	media?: MediaBlock | MediaBlock[];
 }
 
@@ -127,34 +140,71 @@ const SCHEMA_EXAMPLE = `Expected format:
   ]
 }
 Valid types: single, multi, text, image, info
-Options: array of strings or objects with { label, code? }`;
+Options: array of strings or objects with { label, content? }`;
+
+function isMarkdownLang(lang: unknown): lang is "md" | "markdown" {
+	if (typeof lang !== "string") return false;
+	const normalized = lang.trim().toLowerCase();
+	return normalized === "md" || normalized === "markdown";
+}
 
-function validateCodeBlock(block: unknown, context: string): CodeBlock {
+function validateContentBlock(block: unknown, context: string): ContentBlock {
 	if (!block || typeof block !== "object") {
-		throw new Error(`${context}: codeBlock must be an object`);
+		throw new Error(`${context}: content must be an object`);
 	}
 	const b = block as Record<string, unknown>;
-	if (typeof b.code !== "string") {
-		throw new Error(`${context}: codeBlock.code must be a string`);
+	if (typeof b.source !== "string") {
+		throw new Error(`${context}: content.source must be a string`);
 	}
 	if (b.lang !== undefined && typeof b.lang !== "string") {
-		throw new Error(`${context}: codeBlock.lang must be a string`);
+		throw new Error(`${context}: content.lang must be a string`);
 	}
 	if (b.file !== undefined && typeof b.file !== "string") {
-		throw new Error(`${context}: codeBlock.file must be a string`);
+		throw new Error(`${context}: content.file must be a string`);
 	}
 	if (b.lines !== undefined && typeof b.lines !== "string") {
-		throw new Error(`${context}: codeBlock.lines must be a string`);
+		throw new Error(`${context}: content.lines must be a string`);
 	}
 	if (b.title !== undefined && typeof b.title !== "string") {
-		throw new Error(`${context}: codeBlock.title must be a string`);
+		throw new Error(`${context}: content.title must be a string`);
+	}
+	if (b.showSource !== undefined && typeof b.showSource !== "boolean") {
+		throw new Error(`${context}: content.showSource must be a boolean`);
 	}
 	if (b.highlights !== undefined) {
 		if (!Array.isArray(b.highlights) || b.highlights.some((h) => typeof h !== "number")) {
-			throw new Error(`${context}: codeBlock.highlights must be an array of numbers`);
+			throw new Error(`${context}: content.highlights must be an array of numbers`);
+		}
+	}
+
+	if (isMarkdownLang(b.lang)) {
+		if (b.lines !== undefined) {
+			throw new Error(`${context}: content.lines is not allowed for markdown content`);
+		}
+		if (b.highlights !== undefined) {
+			throw new Error(`${context}: content.highlights is not allowed for markdown content`);
 		}
+		return {
+			source: b.source,
+			lang: b.lang.trim().toLowerCase() as "md" | "markdown",
+			file: b.file,
+			title: b.title,
+			showSource: b.showSource,
+		};
 	}
-	return b as unknown as CodeBlock;
+
+	if (b.showSource !== undefined) {
+		throw new Error(`${context}: content.showSource is only valid when content.lang is "md" or "markdown"`);
+	}
+
+	return {
+		source: b.source,
+		lang: b.lang,
+		file: b.file,
+		title: b.title,
+		lines: b.lines,
+		highlights: b.highlights as number[] | undefined,
+	};
 }
 
 function validateOption(option: unknown, questionId: string, index: number): OptionValue {
@@ -169,9 +219,17 @@ function validateOption(option: unknown, questionId: string, index: number): Opt
 			);
 		}
 		if (o.code !== undefined) {
-			validateCodeBlock(o.code, `Question "${questionId}" option "${o.label}"`);
+			throw new Error(
+				`Question "${questionId}" option "${o.label}": legacy "code" is no longer supported; use "content"`
+			);
 		}
-		return option as RichOption;
+		if (o.content !== undefined) {
+			return {
+				label: o.label,
+				content: validateContentBlock(o.content, `Question "${questionId}" option "${o.label}"`),
+			};
+		}
+		return { label: o.label };
 	}
 	throw new Error(
 		`Question "${questionId}": option at index ${index} must be a string or object with label`
@@ -240,7 +298,7 @@ function validateBasicStructure(data: unknown): QuestionsFile {
 				throw new Error(`Question "${q.id}": options must be a non-empty array`);
 			}
 			for (let j = 0; j < q.options.length; j++) {
-				validateOption(q.options[j], q.id as string, j);
+				q.options[j] = validateOption(q.options[j], q.id as string, j);
 			}
 		}
 
@@ -249,7 +307,10 @@ function validateBasicStructure(data: unknown): QuestionsFile {
 		}
 
 		if (q.codeBlock !== undefined) {
-			validateCodeBlock(q.codeBlock, `Question "${q.id}"`);
+			throw new Error(`Question "${q.id}": legacy "codeBlock" is no longer supported; use "content"`);
+		}
+		if (q.content !== undefined) {
+			q.content = validateContentBlock(q.content, `Question "${q.id}"`);
 		}
 
 		if (q.conviction !== undefined) {

package/server.ts

@@ -437,6 +437,155 @@ function escapeHtml(str: string): string {
 		.replace(/"/g, """);
 }
 
+function isMarkdownLang(lang: string | undefined): boolean {
+	if (!lang) return false;
+	const normalized = lang.trim().toLowerCase();
+	return normalized === "md" || normalized === "markdown";
+}
+
+function renderLightMarkdownHtml(text: string): string {
+	let html = escapeHtml(text);
+	html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+	html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+	html = html.replace(/\n/g, "<br>");
+	html = html.replace(/\s(\d+\.)\s/g, "<br>$1 ");
+	return html;
+}
+
+function renderMarkdownPreviewHtml(markdown: string): string {
+	const lines = markdown.replace(/\r\n?/g, "\n").split("\n");
+	const html: string[] = [];
+	const paragraph: string[] = [];
+	let listType: "ul" | "ol" | null = null;
+	let inFence = false;
+	let fenceLang = "";
+	let fenceLines: string[] = [];
+
+	const flushParagraph = () => {
+		if (paragraph.length === 0) return;
+		html.push(`<p>${renderLightMarkdownHtml(paragraph.join(" "))}</p>`);
+		paragraph.length = 0;
+	};
+
+	const closeList = () => {
+		if (!listType) return;
+		html.push(listType === "ol" ? "</ol>" : "</ul>");
+		listType = null;
+	};
+
+	for (const rawLine of lines) {
+		const line = rawLine ?? "";
+
+		if (inFence) {
+			if (/^```/.test(line.trim())) {
+				html.push(`<pre class="markdown-fence"><code${fenceLang ? ` data-lang="${escapeHtml(fenceLang)}"` : ""}>${escapeHtml(fenceLines.join("\n"))}</code></pre>`);
+				inFence = false;
+				fenceLang = "";
+				fenceLines = [];
+			} else {
+				fenceLines.push(line);
+			}
+			continue;
+		}
+
+		const fenceStart = line.match(/^```\s*([^\s`]*)\s*$/);
+		if (fenceStart) {
+			flushParagraph();
+			closeList();
+			inFence = true;
+			fenceLang = fenceStart[1] || "";
+			fenceLines = [];
+			continue;
+		}
+
+		if (!line.trim()) {
+			flushParagraph();
+			closeList();
+			continue;
+		}
+
+		const headingMatch = line.match(/^\s{0,3}(#{1,6})\s+(.+)$/);
+		if (headingMatch) {
+			flushParagraph();
+			closeList();
+			const level = headingMatch[1].length;
+			html.push(`<h${level}>${renderLightMarkdownHtml(headingMatch[2].trim())}</h${level}>`);
+			continue;
+		}
+
+		const quoteMatch = line.match(/^>\s?(.*)$/);
+		if (quoteMatch) {
+			flushParagraph();
+			closeList();
+			html.push(`<blockquote><p>${renderLightMarkdownHtml(quoteMatch[1])}</p></blockquote>`);
+			continue;
+		}
+
+		const orderedMatch = line.match(/^\s*\d+\.\s+(.+)$/);
+		if (orderedMatch) {
+			flushParagraph();
+			if (listType !== "ol") {
+				closeList();
+				html.push("<ol>");
+				listType = "ol";
+			}
+			html.push(`<li>${renderLightMarkdownHtml(orderedMatch[1])}</li>`);
+			continue;
+		}
+
+		const unorderedMatch = line.match(/^\s*[-*]\s+(.+)$/);
+		if (unorderedMatch) {
+			flushParagraph();
+			if (listType !== "ul") {
+				closeList();
+				html.push("<ul>");
+				listType = "ul";
+			}
+			html.push(`<li>${renderLightMarkdownHtml(unorderedMatch[1])}</li>`);
+			continue;
+		}
+
+		closeList();
+		paragraph.push(line.trim());
+	}
+
+	if (inFence) {
+		html.push(`<pre class="markdown-fence"><code${fenceLang ? ` data-lang="${escapeHtml(fenceLang)}"` : ""}>${escapeHtml(fenceLines.join("\n"))}</code></pre>`);
+	}
+
+	flushParagraph();
+	closeList();
+	return html.join("\n");
+}
+
+function renderContentBlockHtml(content: Question["content"] | undefined): string {
+	if (!content?.source) return "";
+
+	const markdownPreview = isMarkdownLang(content.lang) && content.showSource !== true;
+	const headerParts: string[] = [];
+	if (content.title) {
+		headerParts.push(`<span class="code-block-title">${escapeHtml(content.title)}</span>`);
+	}
+	if (content.file) {
+		headerParts.push(`<span class="code-block-file">${escapeHtml(content.file)}</span>`);
+	}
+	if (content.lines) {
+		headerParts.push(`<span class="code-block-lines">L${escapeHtml(content.lines)}</span>`);
+	}
+	if (content.lang && content.lang !== "diff") {
+		headerParts.push(`<span class="code-block-lang">${escapeHtml(content.lang)}</span>`);
+	}
+	const headerHtml = headerParts.length > 0
+		? `<div class="code-block-header">${headerParts.join("")}</div>`
+		: "";
+
+	if (markdownPreview) {
+		return `<div class="code-block markdown-content-block">${headerHtml}<div class="markdown-preview">${renderMarkdownPreviewHtml(content.source)}</div></div>`;
+	}
+
+	return `<div class="code-block">${headerHtml}<pre class="saved-code"><code>${escapeHtml(content.source)}</code></pre></div>`;
+}
+
 function renderMediaCaptionHtml(media: MediaBlock): string {
 	if (!media.caption) return "";
 	return `<div class="media-caption">${escapeHtml(media.caption)}</div>`;
@@ -545,14 +694,12 @@ function renderQuestionsHtml(questionsList: Question[], answers: ResponseItem[])
 			const mediaHtml = renderMediaListHtml(q.media);
 
 			if (q.type === "info") {
-				const codeHtml = q.codeBlock
-					? `<pre class="saved-code"><code>${escapeHtml(q.codeBlock.code)}</code></pre>`
-					: "";
+				const contentHtml = renderContentBlockHtml(q.content);
 				return `
       <div class="${weightClasses(q)}">
         <h2>${escapeHtml(q.question)}</h2>
         ${q.context ? `<p class="question-context">${escapeHtml(q.context)}</p>` : ""}
-        ${codeHtml}
+        ${contentHtml}
         ${mediaHtml}
       </div>
     `;
@@ -579,9 +726,7 @@ function renderQuestionsHtml(questionsList: Question[], answers: ResponseItem[])
 				answerHtml = `<div class="saved-answer">${savedAnswerItemHtml(String(value), q)}</div>`;
 			}
 
-			const codeHtml = q.codeBlock
-				? `<pre class="saved-code"><code>${escapeHtml(q.codeBlock.code)}</code></pre>`
-				: "";
+			const contentHtml = renderContentBlockHtml(q.content);
 
 			const attachHtml =
 				attachments.length > 0
@@ -598,7 +743,7 @@ function renderQuestionsHtml(questionsList: Question[], answers: ResponseItem[])
       <div class="${weightClasses(q)}">
         <h2>${numPrefix}${escapeHtml(q.question)}</h2>
         ${contextHtml}
-        ${codeHtml}
+        ${contentHtml}
         ${mediaHtml}
         ${answerHtml}
         ${attachHtml}
@@ -660,8 +805,11 @@ const SAVED_VIEW_STYLES = `
   padding: 12px;
   background: var(--bg-body);
   border-radius: var(--radius);
-  overflow-x: auto;
+  overflow-x: hidden;
   font-size: 13px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 .saved-answer {
   color: var(--fg);