de994bb837
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>
25 lines
974 B
JavaScript
25 lines
974 B
JavaScript
import { html } from '../lib/preact.js';
|
|
|
|
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}
|
|
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">
|
|
<span class="font-mono text-sm text-starting">${number}.</span>
|
|
<span class="text-sm font-medium text-bright">${label}</span>
|
|
</div>
|
|
${description && html`
|
|
<p class="mt-0.5 pl-4 text-xs text-dim">${description}</p>
|
|
`}
|
|
</button>
|
|
`;
|
|
}
|