feat: Rich Markdown editor with live preview for CLAUDE.md and agent instructions

[sre-helmcode]

Summary

Replace the plain textarea for editing CLAUDE.md and agent instructions with a rich Markdown editor that shows only the rendered preview and provides a formatting toolbar for basic Markdown operations (similar to StackEdit but preview-only mode).

Current State

• CLAUDE.md editing: Plain <textarea> in TeamBuilderPage.tsx (lines 659-668) with no preview
• Step 3 preview: Uses <pre> tag — shows raw text, NOT rendered Markdown (lines 1142-1145)
• Markdown renderer exists: MarkdownRenderer component using react-markdown + remark-gfm (Markdown.tsx) but is only used for chat messages, schedule responses, and webhook responses
• No visual editor anywhere in the application

Proposed Solution

Design Approach: Preview-Only with Formatting Toolbar

Instead of a split-pane editor (like StackEdit), show only the rendered preview with a formatting toolbar that lets users insert Markdown syntax without seeing raw Markdown.

Toolbar Actions

┌────────────────────────────────────────────────────────┐
│ B  I  S  H1  H2  H3  •  1.  ""  <>  🔗  ─  │ Raw ✏️ │
│ ─────────────────────────────────────────────────────  │
│                                                        │
│  Welcome to My Agent                                   │
│                                                        │
│  This agent specializes in...                          │
│                                                        │
│  • First capability                                    │
│  • Second capability                                   │
│                                                        │
│  Important Notes                                       │
│  > Always verify before executing                      │
│                                                        │
└────────────────────────────────────────────────────────┘

Toolbar buttons:

• B — Bold (**text**)
• I — Italic (*text*)
• S — Strikethrough (~~text~~)
• H1/H2/H3 — Headings
• • — Unordered list
• 1. — Ordered list
• "" — Blockquote
• <> — Code block
• 🔗 — Link
• ─ — Horizontal rule
• Raw ✏️ — Toggle to raw Markdown view (for advanced users)

Implementation Options

1. Option A: Use a library like @uiw/react-md-editor — Full-featured MD editor with preview
2. Option B: Use Tiptap — Headless rich text editor, highly customizable, supports Markdown input/output
3. Option C: Custom implementation — Hidden textarea + toolbar + MarkdownRenderer for preview, with cursor/selection management

Recommended: Option B (Tiptap) — Most flexible, good Markdown serialization, customizable toolbar, active community.

Where to Apply

1. TeamBuilderPage Step 2 — CLAUDE.md editor (leader instructions)
2. TeamBuilderPage Step 3 — Preview should use MarkdownRenderer instead of <pre>
3. Agent instructions editor (if/when editing subagent instructions post-creation)

Affected Files

• src/pages/TeamBuilderPage.tsx — Replace textarea with editor (lines 659-668), fix preview (lines 1142-1145)
• src/components/Markdown.tsx — May need to extend for editor integration
• New component: src/components/MarkdownEditor.tsx
• package.json — New dependency (tiptap or similar)

Acceptance Criteria

• Rich editor replaces plain textarea for CLAUDE.md
• Formatting toolbar with basic Markdown actions
• Default view shows rendered preview (not raw Markdown)
• Toggle to raw Markdown view for advanced users
• Toolbar inserts correct Markdown syntax
• Output is valid Markdown (stored as instructions_md)
• Step 3 preview renders Markdown properly (not raw text)
• Dark theme compatible
• Keyboard shortcuts for common formatting (Cmd+B for bold, etc.)

[sre-helmcode]

Implemented in 6d96c63. Rich Markdown editor with Tiptap: WYSIWYG toolbar, raw/preview toggle, keyboard shortcuts, dark theme. Replaces plain textareas in TeamBuilderPage for CLAUDE.md and sub-agent instructions.