feat(dashboard): add markdown preview for AskUserQuestion options

Implement side-by-side preview layout when AskUserQuestion options
include markdown content, matching the Claude Code tool spec.

Hook changes (bin/amc-hook):
- Extract optional 'markdown' field from question options
- Only include when present (maintains backward compatibility)

QuestionBlock layout:
- Detect hasMarkdownPreviews via options.some(opt => opt.markdown)
- Standard layout: vertical option list (unchanged)
- Preview layout: 40% options left, 60% preview pane right
- Fixed 400px preview height prevents layout thrashing on hover
- Track previewIndex state, update on mouseEnter/focus

Content rendering (smart detection):
- Code fences (starts with ```): renderContent() for syntax highlighting
- Everything else: raw <pre> to preserve ASCII diagrams exactly
- "No preview for this option" when hovered option lacks markdown

OptionButton enhancements:
- Accept selected, onMouseEnter, onFocus props
- Visual selected state: brighter border/bg with subtle shadow
- Compact padding (py-2 vs py-3.5) for preview layout density
- Graceful undefined handling for standard layout usage

Bug fixes during development:
- Layout thrashing: Fixed height (not max-height) on preview pane
- ASCII corruption: Detect code fences vs plain text for render path
- Horizontal overflow: Use overflow-auto (not just overflow-y-auto)
- Data pipeline: Hook was stripping markdown field (root cause)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

bin/amc-hook

@@ -82,10 +82,14 @@ def _extract_questions(hook):
             "options": [],
         }
         for opt in q.get("options", []):
-            entry["options"].append({
+            opt_entry = {
                 "label": opt.get("label", ""),
                 "description": opt.get("description", ""),
-            })
+            }
+            # Include markdown preview if present
+            if opt.get("markdown"):
+                opt_entry["markdown"] = opt.get("markdown")
+            entry["options"].append(opt_entry)
         result.append(entry)
     return result
 

dashboard/components/OptionButton.js

@@ -1,17 +1,23 @@
 import { html } from '../lib/preact.js';
 
-export function OptionButton({ number, label, description, onClick }) {
+export function OptionButton({ number, label, description, selected, onClick, onMouseEnter, onFocus }) {
+  const selectedStyles = selected 
+    ? 'border-starting/60 bg-starting/15 shadow-sm' 
+    : 'border-selection/70 bg-surface2/55';
+  
   return html`
     <button
       onClick=${onClick}
-      class="group w-full rounded-xl border border-selection/70 bg-surface2/55 p-3.5 text-left transition-[transform,border-color,background-color,box-shadow] duration-200 hover:-translate-y-0.5 hover:border-starting/55 hover:bg-surface2/90 hover:shadow-halo"
+      onMouseEnter=${onMouseEnter}
+      onFocus=${onFocus}
+      class="group w-full rounded-lg border px-3 py-2 text-left transition-[transform,border-color,background-color,box-shadow] duration-200 hover:-translate-y-0.5 hover:border-starting/55 hover:bg-surface2/90 hover:shadow-halo ${selectedStyles}"
     >
-      <div class="flex items-baseline gap-2.5">
+      <div class="flex items-baseline gap-2">
-        <span class="font-mono text-starting">${number}.</span>
+        <span class="font-mono text-sm text-starting">${number}.</span>
-        <span class="font-medium text-bright">${label}</span>
+        <span class="text-sm font-medium text-bright">${label}</span>
       </div>
       ${description && html`
-        <p class="mt-1 pl-5 text-sm text-dim">${description}</p>
+        <p class="mt-0.5 pl-4 text-xs text-dim">${description}</p>
       `}
     </button>
   `;

dashboard/components/QuestionBlock.js

@@ -1,12 +1,15 @@
-import { html, useState } from '../lib/preact.js';
+import { html, useState, useRef } from '../lib/preact.js';
 import { getStatusMeta } from '../utils/status.js';
 import { OptionButton } from './OptionButton.js';
+import { renderContent } from '../lib/markdown.js';
 
 export function QuestionBlock({ questions, sessionId, status, onRespond }) {
   const [freeformText, setFreeformText] = useState('');
   const [focused, setFocused] = useState(false);
   const [sending, setSending] = useState(false);
   const [error, setError] = useState(null);
+  const [previewIndex, setPreviewIndex] = useState(0);
+  const textareaRef = useRef(null);
   const meta = getStatusMeta(status);
 
   if (!questions || questions.length === 0) return null;
@@ -16,6 +19,9 @@ export function QuestionBlock({ questions, sessionId, status, onRespond }) {
   const remainingCount = questions.length - 1;
   const options = question.options || [];
   
+  // Check if any option has markdown preview content
+  const hasMarkdownPreviews = options.some(opt => opt.markdown);
+
   const handleOptionClick = async (optionLabel) => {
     if (sending) return;
     setSending(true);
@@ -44,12 +50,111 @@ export function QuestionBlock({ questions, sessionId, status, onRespond }) {
         console.error('QuestionBlock freeform error:', err);
       } finally {
         setSending(false);
+        // Refocus the textarea after submission
+        // Use setTimeout to ensure React has re-rendered with disabled=false
+        setTimeout(() => {
+          textareaRef.current?.focus();
+        }, 0);
       }
     }
   };
 
+  // Side-by-side layout when options have markdown previews
+  if (hasMarkdownPreviews) {
+    const currentMarkdown = options[previewIndex]?.markdown || '';
+    
+    return html`
+      <div class="space-y-2.5" onClick=${(e) => e.stopPropagation()}>
+        ${error && html`
+          <div class="rounded-lg border border-attention/40 bg-attention/12 px-3 py-1.5 text-sm text-attention">
+            ${error}
+          </div>
+        `}
+        
+        <!-- Question Header Badge -->
+        ${question.header && html`
+          <span class="inline-flex rounded-full border px-2 py-1 font-mono text-micro uppercase tracking-[0.15em] ${meta.badge}">
+            ${question.header}
+          </span>
+        `}
+
+        <!-- Question Text -->
+        <p class="font-medium text-bright">${question.question || question.text}</p>
+
+        <!-- Side-by-side: Options | Preview -->
+        <div class="flex gap-3">
+          <!-- Options List (left side) -->
+          <div class="w-2/5 space-y-1.5 shrink-0">
+            ${options.map((opt, i) => html`
+              <${OptionButton}
+                key=${i}
+                number=${i + 1}
+                label=${opt.label || opt}
+                description=${opt.description}
+                selected=${previewIndex === i}
+                onMouseEnter=${() => setPreviewIndex(i)}
+                onFocus=${() => setPreviewIndex(i)}
+                onClick=${() => handleOptionClick(opt.label || opt)}
+              />
+            `)}
+          </div>
+
+          <!-- Preview Pane (right side) — fixed height prevents layout thrashing on hover -->
+          <div class="flex-1 rounded-lg border border-selection/50 bg-bg/60 p-3 h-[400px] overflow-auto">
+            ${currentMarkdown
+              ? (currentMarkdown.trimStart().startsWith('```')
+                  ? renderContent(currentMarkdown)
+                  : html`<pre class="font-mono text-sm text-fg/90 whitespace-pre leading-relaxed">${currentMarkdown}</pre>`)
+              : html`<p class="text-dim text-sm italic">No preview for this option</p>`
+            }
+          </div>
+        </div>
+
+        <!-- Freeform Input -->
+        <form onSubmit=${handleFreeformSubmit} class="flex items-end gap-2.5">
+          <textarea
+            ref=${textareaRef}
+            value=${freeformText}
+            onInput=${(e) => {
+              setFreeformText(e.target.value);
+              e.target.style.height = 'auto';
+              e.target.style.height = e.target.scrollHeight + 'px';
+            }}
+            onKeyDown=${(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleFreeformSubmit(e);
+              }
+            }}
+            onFocus=${() => setFocused(true)}
+            onBlur=${() => setFocused(false)}
+            placeholder="Type a response..."
+            rows="1"
+            class="flex-1 resize-none overflow-hidden rounded-xl border border-selection/75 bg-bg/70 px-3 py-2 text-sm text-fg transition-colors duration-150 placeholder:text-dim focus:outline-none"
+            style=${{ minHeight: '38px', maxHeight: '150px', borderColor: focused ? meta.borderColor : undefined }}
+            disabled=${sending}
+          />
+          <button
+            type="submit"
+            class="shrink-0 rounded-xl px-3 py-2 text-sm font-medium transition-[transform,filter] duration-150 hover:-translate-y-0.5 hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
+            style=${{ backgroundColor: meta.borderColor, color: '#0a0f18' }}
+            disabled=${sending || !freeformText.trim()}
+          >
+            ${sending ? 'Sending...' : 'Send'}
+          </button>
+        </form>
+
+        <!-- More Questions Indicator -->
+        ${remainingCount > 0 && html`
+          <p class="font-mono text-label text-dim">+ ${remainingCount} more question${remainingCount > 1 ? 's' : ''} after this</p>
+        `}
+      </div>
+    `;
+  }
+
+  // Standard layout (no markdown previews)
   return html`
-    <div class="space-y-3" onClick=${(e) => e.stopPropagation()}>
+    <div class="space-y-2.5" onClick=${(e) => e.stopPropagation()}>
       ${error && html`
         <div class="rounded-lg border border-attention/40 bg-attention/12 px-3 py-1.5 text-sm text-attention">
           ${error}
@@ -67,7 +172,7 @@ export function QuestionBlock({ questions, sessionId, status, onRespond }) {
 
       <!-- Options -->
       ${options.length > 0 && html`
-        <div class="space-y-2">
+        <div class="space-y-1.5">
           ${options.map((opt, i) => html`
             <${OptionButton}
               key=${i}
@@ -83,6 +188,7 @@ export function QuestionBlock({ questions, sessionId, status, onRespond }) {
       <!-- Freeform Input -->
       <form onSubmit=${handleFreeformSubmit} class="flex items-end gap-2.5">
         <textarea
+          ref=${textareaRef}
           value=${freeformText}
           onInput=${(e) => {
             setFreeformText(e.target.value);