Add optional rich text body field to items

- Add body field to data model (stored as markdown in file)
- Parser recognizes `> ` prefixed lines as body content
- Serializer outputs body as indented blockquote lines
- Add lightweight WYSIWYG editor (contenteditable, no external deps)
- Toolbar: bold, italic, link, H1/H2/H3, lists, code block, table, image
- Clipboard export: HTML (for Docs/Word), Markdown, plain text
- Editor shows collapsed when empty, expands on click
- Include body in text search filter
- Dark mode support for editor styles
- Update README with feature and file format example

README.md

@@ -73,6 +73,9 @@ All your tasks live in `backlog.md`, structured as:
 <!-- SECTION: ENTRIES -->
 
 - [ ] [P0] Ship landing page *(due: 2025-06-01, priority: P0, progress: 50)*
+  > This is the **body** with rich text details.
+  > - Milestone 1: Design
+  > - Milestone 2: Build
   - [x] Design mockups *(priority: P0, progress: 100)*
   - [/] Implement frontend *(priority: P1, progress: 30)*
 - [!] [P1] API integration *(priority: P1, reason: waiting for keys)*
@@ -97,9 +100,10 @@ You can edit this file in any text editor. The app detects external changes and
 - **6 statuses** — open, in-progress (`/`), blocked (`!`), postponed (`>`), done (`x`), cancelled (`-`)
 - **Priorities** — P0 (burning) through P3, with drag-and-drop reordering within each priority
 - **Progress tracking** — 0–100% per task; done auto-sets to 100%
+- **Rich text body** — optional details field with WYSIWYG editor (bold, italic, links, headings, lists, code blocks, tables, images); stored as markdown; copy to clipboard as HTML (for Google Docs/Word), Markdown, or plain text
 - **Due dates** — with overdue highlighting
 - **Tags** — free-form labels with autocomplete
-- **Quick search** — instant text search with hierarchical parent visibility
+- **Quick search** — instant text search across title, body, and tags with hierarchical parent visibility
 - **Integrity checks** — SHA-256 checksum on every save; warning-only on mismatch
 - **Automatic backups** — timestamped on every save, rotating retention
 - **Stats & metrics** — items created/completed, avg time in-progress, most active project — all from real history data

web/dialogs.jsx

@@ -1,6 +1,177 @@
 // Stylish dialog primitives + concrete dialogs (Edit/Add Item, Confirm).
 
-const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React;
+const { useState: useStateD, useEffect: useEffectD, useRef: useRefD, useCallback: useCallbackD } = React;
+
+// ---- Rich Text Editor (lightweight WYSIWYG using contenteditable) ----
+function RichTextEditor({ value, onChange, placeholder = "Add details...", collapsed = false, onExpand }) {
+  const editorRef = useRefD(null);
+  const [isExpanded, setIsExpanded] = useStateD(!collapsed || !!value);
+  const [showCopyMenu, setShowCopyMenu] = useStateD(false);
+  const [copyMenuPos, setCopyMenuPos] = useStateD({ x: 0, y: 0 });
+  const toolbarRef = useRefD(null);
+
+  // Initialize editor content
+  useEffectD(() => {
+    if (editorRef.current && value !== undefined) {
+      const html = MarkdownUtils.toHtml(value || '');
+      if (editorRef.current.innerHTML !== html) {
+        editorRef.current.innerHTML = html;
+      }
+    }
+  }, [value]);
+
+  const handleInput = useCallbackD(() => {
+    if (editorRef.current) {
+      const md = MarkdownUtils.toMarkdown(editorRef.current.innerHTML);
+      onChange?.(md || null);
+    }
+  }, [onChange]);
+
+  const execCmd = useCallbackD((cmd, val = null) => {
+    editorRef.current?.focus();
+    document.execCommand(cmd, false, val);
+    handleInput();
+  }, [handleInput]);
+
+  const handleKeyDown = useCallbackD((e) => {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      execCmd('insertText', '  ');
+    }
+    // Ctrl/Cmd + B/I/K shortcuts
+    if (e.ctrlKey || e.metaKey) {
+      if (e.key === 'b') { e.preventDefault(); execCmd('bold'); }
+      if (e.key === 'i') { e.preventDefault(); execCmd('italic'); }
+      if (e.key === 'k') { e.preventDefault(); insertLink(); }
+    }
+  }, [execCmd]);
+
+  const insertLink = useCallbackD(() => {
+    const url = prompt('Enter URL:');
+    if (url) execCmd('createLink', url);
+  }, [execCmd]);
+
+  const insertImage = useCallbackD(() => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.onchange = async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = () => {
+        execCmd('insertHTML', `<img src="${reader.result}" alt="${file.name}" class="rte-img">`);
+      };
+      reader.readAsDataURL(file);
+    };
+    input.click();
+  }, [execCmd]);
+
+  const insertTable = useCallbackD(() => {
+    const html = '<table class="rte-table"><thead><tr><th>Header 1</th><th>Header 2</th></tr></thead><tbody><tr><td>Cell 1</td><td>Cell 2</td></tr></tbody></table><p><br></p>';
+    execCmd('insertHTML', html);
+  }, [execCmd]);
+
+  const insertCodeBlock = useCallbackD(() => {
+    execCmd('insertHTML', '<pre class="rte-code-block"><code>code here</code></pre><p><br></p>');
+  }, [execCmd]);
+
+  const handleCopyMenu = useCallbackD((e) => {
+    e.preventDefault();
+    const rect = e.currentTarget.getBoundingClientRect();
+    setCopyMenuPos({ x: rect.left, y: rect.bottom + 4 });
+    setShowCopyMenu(true);
+  }, []);
+
+  const copyAs = useCallbackD(async (format) => {
+    setShowCopyMenu(false);
+    const html = editorRef.current?.innerHTML || '';
+    const md = MarkdownUtils.toMarkdown(html);
+    if (format === 'html') await ClipboardUtils.copyHtml(html, md);
+    else if (format === 'markdown') await ClipboardUtils.copyMarkdown(md);
+    else if (format === 'text') await ClipboardUtils.copyPlainText(html);
+  }, []);
+
+  const expand = useCallbackD(() => {
+    setIsExpanded(true);
+    onExpand?.();
+    setTimeout(() => editorRef.current?.focus(), 50);
+  }, [onExpand]);
+
+  // Close copy menu on outside click
+  useEffectD(() => {
+    if (!showCopyMenu) return;
+    const close = () => setShowCopyMenu(false);
+    document.addEventListener('click', close);
+    return () => document.removeEventListener('click', close);
+  }, [showCopyMenu]);
+
+  if (!isExpanded) {
+    return (
+      <div className="rte-collapsed" onClick={expand}>
+        <span className="rte-collapsed-placeholder">{placeholder}</span>
+        <Icon name="plus" size={12} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="rte-wrap">
+      <div className="rte-toolbar" ref={toolbarRef}>
+        <button type="button" onClick={() => execCmd('bold')} title="Bold (Ctrl+B)"><strong>B</strong></button>
+        <button type="button" onClick={() => execCmd('italic')} title="Italic (Ctrl+I)"><em>I</em></button>
+        <span className="rte-toolbar-sep" />
+        <button type="button" onClick={insertLink} title="Link (Ctrl+K)">
+          <svg width="14" height="14" viewBox="0 0 20 20"><path d="M8 12l4-4M6 10l-1 1a3 3 0 0 0 4.24 4.24l1-1M14 10l1-1a3 3 0 0 0-4.24-4.24l-1 1" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
+        </button>
+        <span className="rte-toolbar-sep" />
+        <button type="button" onClick={() => execCmd('formatBlock', 'h1')} title="Heading 1">H1</button>
+        <button type="button" onClick={() => execCmd('formatBlock', 'h2')} title="Heading 2">H2</button>
+        <button type="button" onClick={() => execCmd('formatBlock', 'h3')} title="Heading 3">H3</button>
+        <span className="rte-toolbar-sep" />
+        <button type="button" onClick={() => execCmd('insertUnorderedList')} title="Bullet list">
+          <svg width="14" height="14" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><line x1="8" y1="6" x2="17" y2="6"/><line x1="8" y1="10" x2="17" y2="10"/><line x1="8" y1="14" x2="17" y2="14"/><circle cx="4" cy="6" r="1" fill="currentColor"/><circle cx="4" cy="10" r="1" fill="currentColor"/><circle cx="4" cy="14" r="1" fill="currentColor"/></g></svg>
+        </button>
+        <button type="button" onClick={() => execCmd('insertOrderedList')} title="Numbered list">
+          <svg width="14" height="14" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><line x1="8" y1="6" x2="17" y2="6"/><line x1="8" y1="10" x2="17" y2="10"/><line x1="8" y1="14" x2="17" y2="14"/><text x="3" y="7" fontSize="5" fill="currentColor" stroke="none">1</text><text x="3" y="11" fontSize="5" fill="currentColor" stroke="none">2</text><text x="3" y="15" fontSize="5" fill="currentColor" stroke="none">3</text></g></svg>
+        </button>
+        <span className="rte-toolbar-sep" />
+        <button type="button" onClick={insertCodeBlock} title="Code block">
+          <svg width="14" height="14" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="7,5 3,10 7,15"/><polyline points="13,5 17,10 13,15"/></g></svg>
+        </button>
+        <button type="button" onClick={insertTable} title="Table">
+          <svg width="14" height="14" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="4" width="14" height="12" rx="1.5"/><line x1="3" y1="8" x2="17" y2="8"/><line x1="10" y1="8" x2="10" y2="16"/></g></svg>
+        </button>
+        <button type="button" onClick={insertImage} title="Image">
+          <svg width="14" height="14" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"><rect x="3" y="4" width="14" height="12" rx="1.5"/><circle cx="7" cy="8" r="1.5"/><path d="M3 14l4-4 3 3 4-4 3 3"/></g></svg>
+        </button>
+        <span className="rte-toolbar-sep" />
+        <button type="button" onClick={handleCopyMenu} title="Copy as..." className="rte-copy-btn">
+          <Icon name="copy" size={12} />
+          <svg width="8" height="8" viewBox="0 0 10 10"><polyline points="2,4 5,7 8,4" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+        </button>
+      </div>
+      {showCopyMenu && (
+        <div className="rte-copy-menu" style={{ left: copyMenuPos.x, top: copyMenuPos.y }}>
+          <button type="button" onClick={() => copyAs('html')}>Copy for Docs/Word</button>
+          <button type="button" onClick={() => copyAs('markdown')}>Copy as Markdown</button>
+          <button type="button" onClick={() => copyAs('text')}>Copy as Plain Text</button>
+        </div>
+      )}
+      <div
+        ref={editorRef}
+        className="rte-editor"
+        contentEditable
+        onInput={handleInput}
+        onKeyDown={handleKeyDown}
+        data-placeholder={placeholder}
+        onContextMenu={(e) => {
+          // Allow default context menu but add copy options via showCopyMenu
+        }}
+      />
+    </div>
+  );
+}
 
 function Dialog({ open, onClose, children, width = 460, labelledBy }) {
   useEffectD(() => {
@@ -43,6 +214,7 @@ function DialogHeader({ eyebrow, title, onClose, id }) {
 // --- Item editor (used for both edit and add) ---
 function ItemDialog({ open, mode, initial, onClose, onSubmit, recentTags = [] }) {
   const [title, setTitle] = useStateD("");
+  const [body, setBody] = useStateD(null);
   const [priority, setPriority] = useStateD("P2");
   const [status, setStatus] = useStateD("open");
   const [due, setDue] = useStateD("");
@@ -55,6 +227,7 @@ function ItemDialog({ open, mode, initial, onClose, onSubmit, recentTags = [] })
   useEffectD(() => {
     if (!open) return;
     setTitle(initial?.title || "");
+    setBody(initial?.body || null);
     setPriority(initial?.priority || "P2");
     setStatus(initial?.status || "open");
     setDue(initial?.due || "");
@@ -81,6 +254,7 @@ function ItemDialog({ open, mode, initial, onClose, onSubmit, recentTags = [] })
     if (status === "done") outProgress = 100;
     onSubmit({
       title: title.trim(),
+      body: body || null,
       priority, status,
       due: due || null,
       tags,
@@ -114,6 +288,16 @@ function ItemDialog({ open, mode, initial, onClose, onSubmit, recentTags = [] })
             />
           </div>
 
+          <div className="field">
+            <label className="field-label">Details <span className="field-hint">rich text, supports markdown</span></label>
+            <RichTextEditor
+              value={body}
+              onChange={setBody}
+              placeholder="Add notes, context, or details..."
+              collapsed={!body}
+            />
+          </div>
+
           <div className="field-row">
             <div className="field">
               <label className="field-label">Priority</label>
@@ -370,3 +554,4 @@ function TagMatchHL({ text, match }) {
 window.Dialog = Dialog;
 window.ItemDialog = ItemDialog;
 window.ConfirmDialog = ConfirmDialog;
+window.RichTextEditor = RichTextEditor;

web/helpers.jsx

@@ -100,7 +100,7 @@ function filterTree(items, f) {
     }
     if (f.text) {
       const q = f.text.toLowerCase();
-      const hay = [it.title, it.reason, ...(it.tags || [])].filter(Boolean).join(" ").toLowerCase();
+      const hay = [it.title, it.body, it.reason, ...(it.tags || [])].filter(Boolean).join(" ").toLowerCase();
       if (!hay.includes(q)) return false;
     }
     return true;
@@ -358,10 +358,173 @@ function ProgressGauge({ value, onClick, interactive = false, size = "sm" }) {
   );
 }
 
+// ---- Markdown ↔ HTML conversion (lightweight, no external deps) ----
+const MarkdownUtils = {
+  // Convert markdown to HTML for rendering in editor
+  toHtml(md) {
+    if (!md) return '';
+    let html = md;
+
+    // Escape HTML entities first
+    html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+    // Code blocks (``` ... ```) - must be before inline code
+    html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) =>
+      `<pre class="rte-code-block" data-lang="${lang}"><code>${code.trim()}</code></pre>`);
+
+    // Tables
+    html = html.replace(/^\|(.+)\|\s*\n\|[-:| ]+\|\s*\n((?:\|.+\|\s*\n?)+)/gm, (_, header, body) => {
+      const headers = header.split('|').map(c => c.trim()).filter(Boolean);
+      const rows = body.trim().split('\n').map(row =>
+        row.split('|').map(c => c.trim()).filter(Boolean)
+      );
+      return `<table class="rte-table"><thead><tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr></thead><tbody>${rows.map(r => `<tr>${r.map(c => `<td>${c}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
+    });
+
+    // Images (base64 or URL)
+    html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" class="rte-img">');
+
+    // Links
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+
+    // Bold **text** or __text__
+    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');
+
+    // Italic *text* or _text_ (not inside words)
+    html = html.replace(/(?<![*\w])\*([^*\n]+)\*(?![*\w])/g, '<em>$1</em>');
+    html = html.replace(/(?<![_\w])_([^_\n]+)_(?![_\w])/g, '<em>$1</em>');
+
+    // Inline code `code`
+    html = html.replace(/`([^`]+)`/g, '<code class="rte-inline-code">$1</code>');
+
+    // Headings
+    html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+    html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+    html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+
+    // Lists - unordered
+    html = html.replace(/^[-*] (.+)$/gm, '<li data-list="ul">$1</li>');
+    // Lists - ordered
+    html = html.replace(/^\d+\. (.+)$/gm, '<li data-list="ol">$1</li>');
+
+    // Wrap consecutive list items
+    html = html.replace(/((?:<li data-list="ul">.+<\/li>\s*)+)/g, '<ul>$1</ul>');
+    html = html.replace(/((?:<li data-list="ol">.+<\/li>\s*)+)/g, '<ol>$1</ol>');
+    html = html.replace(/ data-list="[uo]l"/g, '');
+
+    // Paragraphs - wrap remaining text blocks
+    html = html.split('\n\n').map(block => {
+      block = block.trim();
+      if (!block) return '';
+      if (/^<(h[1-3]|ul|ol|pre|table|p)/.test(block)) return block;
+      if (block.includes('<')) return block; // Already has HTML
+      return `<p>${block.replace(/\n/g, '<br>')}</p>`;
+    }).join('\n');
+
+    return html;
+  },
+
+  // Convert HTML from editor back to markdown
+  toMarkdown(html) {
+    if (!html) return '';
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    return this._nodeToMd(doc.body).trim();
+  },
+
+  _nodeToMd(node) {
+    let md = '';
+    for (const child of node.childNodes) {
+      if (child.nodeType === Node.TEXT_NODE) {
+        md += child.textContent;
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        const tag = child.tagName.toLowerCase();
+        const inner = this._nodeToMd(child);
+        switch (tag) {
+          case 'strong': case 'b': md += `**${inner}**`; break;
+          case 'em': case 'i': md += `*${inner}*`; break;
+          case 'code':
+            if (child.parentElement?.tagName === 'PRE') md += inner;
+            else md += `\`${inner}\``;
+            break;
+          case 'pre': md += `\`\`\`\n${inner}\n\`\`\`\n\n`; break;
+          case 'a': md += `[${inner}](${child.getAttribute('href') || ''})`; break;
+          case 'img': md += `![${child.getAttribute('alt') || ''}](${child.getAttribute('src') || ''})`; break;
+          case 'h1': md += `# ${inner}\n\n`; break;
+          case 'h2': md += `## ${inner}\n\n`; break;
+          case 'h3': md += `### ${inner}\n\n`; break;
+          case 'p': md += `${inner}\n\n`; break;
+          case 'br': md += '\n'; break;
+          case 'li': md += `- ${inner}\n`; break;
+          case 'ul': case 'ol': md += inner + '\n'; break;
+          case 'table': md += this._tableToMd(child) + '\n\n'; break;
+          case 'thead': case 'tbody': case 'tr': case 'th': case 'td': md += inner; break;
+          case 'div': md += inner + '\n'; break;
+          default: md += inner;
+        }
+      }
+    }
+    return md;
+  },
+
+  _tableToMd(table) {
+    const rows = Array.from(table.querySelectorAll('tr'));
+    if (!rows.length) return '';
+    const lines = [];
+    rows.forEach((row, i) => {
+      const cells = Array.from(row.querySelectorAll('th, td')).map(c => c.textContent.trim());
+      lines.push('| ' + cells.join(' | ') + ' |');
+      if (i === 0) lines.push('|' + cells.map(() => '---').join('|') + '|');
+    });
+    return lines.join('\n');
+  },
+
+  // Convert HTML to plain text
+  toPlainText(html) {
+    if (!html) return '';
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    return doc.body.textContent || '';
+  }
+};
+
+// ---- Clipboard utilities for multiple formats ----
+const ClipboardUtils = {
+  // Copy to clipboard with multiple formats (HTML primary, plain text also)
+  async copyHtml(html, markdown) {
+    const plain = MarkdownUtils.toPlainText(html);
+    try {
+      // Modern API: write multiple formats
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'text/html': new Blob([html], { type: 'text/html' }),
+          'text/plain': new Blob([plain], { type: 'text/plain' })
+        })
+      ]);
+      return true;
+    } catch {
+      // Fallback: plain text only
+      await navigator.clipboard.writeText(plain);
+      return true;
+    }
+  },
+
+  async copyMarkdown(markdown) {
+    await navigator.clipboard.writeText(markdown);
+    return true;
+  },
+
+  async copyPlainText(html) {
+    const plain = MarkdownUtils.toPlainText(html);
+    await navigator.clipboard.writeText(plain);
+    return true;
+  }
+};
+
 Object.assign(window, {
   STATUSES, STATUS_BY_KEY, STATUS_ORDER, PRIORITIES,
   parseDate, daysBetween, isOverdue, dueRelative, fmtTimestamp, fmtBytes, fmtRelative, fmtShortDate,
   walkTree, findItem, allTags, countAll, countByStatus, filterTree,
   Icon, StatusIcon, ColorStatusIcon, STATUS_COLORS, STATUS_EMOJI, StatusStyleContext,
-  PROGRESS_STEPS, snapProgress, progressFor, shouldShowProgress, cycleProgress, ProgressGauge
+  PROGRESS_STEPS, snapProgress, progressFor, shouldShowProgress, cycleProgress, ProgressGauge,
+  MarkdownUtils, ClipboardUtils
 });

web/storage.jsx

@@ -70,9 +70,30 @@ const Parser = {
     const uid = () => 'i-' + (++idSeq).toString(36);
 
     const entries = [];
-    const stack = [{ children: entries, depth: -1, level: 0 }];
+    const stack = [{ children: entries, depth: -1, level: 0, item: null }];
+    const lines = entriesText.split('\n');
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+
+      // Check for body line (starts with whitespace + "> ")
+      const bodyMatch = line.match(/^(\s*)>\s?(.*)$/);
+      if (bodyMatch) {
+        // Body line - attach to current item at matching depth
+        const bodyDepth = bodyMatch[1].length / 2;
+        const bodyLine = bodyMatch[2];
+        // Find the item at this depth
+        for (let j = stack.length - 1; j >= 0; j--) {
+          if (stack[j].depth === bodyDepth && stack[j].item) {
+            if (!stack[j].item.body) stack[j].item.body = '';
+            else stack[j].item.body += '\n';
+            stack[j].item.body += bodyLine;
+            break;
+          }
+        }
+        continue;
+      }
 
-    for (const line of entriesText.split('\n')) {
       const m = line.match(/^(\s*)[-*]\s*\[([ x!>/\-])\]\s*(.*)$/);
       if (!m) continue;
 
@@ -108,9 +129,10 @@ const Parser = {
         progress: status === 'done' ? 100 : progress,
         collapsed: false,
         children: [],
+        body: null,
       };
       stack[stack.length - 1].children.push(item);
-      stack.push({ children: item.children, depth, level: item.level });
+      stack.push({ children: item.children, depth, level: item.level, item });
     }
 
     return { entries, history, meta, checksumOk };
@@ -143,6 +165,12 @@ const Parser = {
       const metaStr = meta.length ? ` *(${meta.join(', ')})*` : '';
       const prefix  = it.priority ? `[${it.priority}] ` : '';
       lines.push(`${indent}- [${GLYPH[it.status] || ' '}] ${prefix}${it.title}${metaStr}`);
+      // Serialize body as indented blockquote lines
+      if (it.body) {
+        for (const bodyLine of it.body.split('\n')) {
+          lines.push(`${indent}> ${bodyLine}`);
+        }
+      }
       if (it.children?.length) {
         lines.push(...this._serializeEntries(it.children, depth + 1).split('\n'));
       }

web/styles.css

@@ -89,6 +89,11 @@ html[data-theme="dark"] .restore-warn-title { color: oklch(0.92 0.05 75); }
 html[data-theme="dark"] .restore-warn-body  { color: oklch(0.78 0.04 70); }
 html[data-theme="dark"] .restore-warn-body code { background: oklch(0 0 0 / 0.30); }
 html[data-theme="dark"] .drag-handle { color: oklch(0.50 0.005 60); }
+html[data-theme="dark"] .rte-toolbar { background: oklch(0.25 0.010 60); }
+html[data-theme="dark"] .rte-code-block,
+html[data-theme="dark"] .rte-inline-code { background: oklch(0.25 0.010 60); }
+html[data-theme="dark"] .rte-table th { background: oklch(0.25 0.010 60); }
+html[data-theme="dark"] .rte-table td { background: oklch(0.22 0.008 60); }
 
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; height: 100%; }
@@ -1049,6 +1054,197 @@ input { font: inherit; color: inherit; }
   background: var(--bg-2); color: var(--ink-2);
 }
 
+/* ---------- Rich Text Editor ---------- */
+.rte-wrap {
+  border: 1px solid var(--rule);
+  border-radius: var(--radius);
+  background: var(--bg);
+  overflow: hidden;
+  transition: border-color 0.12s, box-shadow 0.12s;
+}
+.rte-wrap:focus-within {
+  border-color: var(--accent-edge);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+  background: var(--paper);
+}
+
+.rte-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--rule);
+  background: var(--bg-2);
+  flex-wrap: wrap;
+}
+.rte-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink-2);
+  background: transparent;
+  transition: background 0.1s, color 0.1s;
+}
+.rte-toolbar button:hover {
+  background: var(--paper);
+  color: var(--ink);
+}
+.rte-toolbar-sep {
+  width: 1px;
+  height: 18px;
+  background: var(--rule);
+  margin: 0 4px;
+}
+.rte-copy-btn {
+  width: auto !important;
+  padding: 0 6px;
+  gap: 3px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.rte-copy-menu {
+  position: fixed;
+  background: var(--paper);
+  border: 1px solid var(--rule);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-pop);
+  padding: 4px;
+  z-index: 100;
+  min-width: 160px;
+}
+.rte-copy-menu button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 7px 10px;
+  border-radius: 4px;
+  font-size: 12.5px;
+  color: var(--ink);
+}
+.rte-copy-menu button:hover {
+  background: var(--accent-soft);
+  color: var(--accent-deep);
+}
+
+.rte-editor {
+  min-height: 80px;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--ink);
+  outline: none;
+}
+.rte-editor:empty::before {
+  content: attr(data-placeholder);
+  color: var(--ink-3);
+  pointer-events: none;
+}
+.rte-editor p { margin: 0 0 0.75em; }
+.rte-editor p:last-child { margin-bottom: 0; }
+.rte-editor h1, .rte-editor h2, .rte-editor h3 {
+  margin: 0.8em 0 0.4em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+.rte-editor h1:first-child,
+.rte-editor h2:first-child,
+.rte-editor h3:first-child { margin-top: 0; }
+.rte-editor h1 { font-size: 1.3em; }
+.rte-editor h2 { font-size: 1.15em; }
+.rte-editor h3 { font-size: 1em; }
+.rte-editor ul, .rte-editor ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+.rte-editor li { margin: 0.25em 0; }
+.rte-editor a {
+  color: var(--accent-deep);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.rte-editor a:hover { color: var(--accent); }
+.rte-editor strong { font-weight: 600; }
+.rte-editor em { font-style: italic; }
+
+.rte-inline-code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  padding: 1px 5px;
+  background: var(--bg-2);
+  border-radius: 3px;
+  color: var(--ink);
+}
+.rte-code-block {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  padding: 10px 12px;
+  background: var(--bg-2);
+  border-radius: var(--radius);
+  margin: 0.75em 0;
+  overflow-x: auto;
+  white-space: pre;
+}
+.rte-code-block code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
+
+.rte-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.75em 0;
+  font-size: 12.5px;
+}
+.rte-table th, .rte-table td {
+  border: 1px solid var(--rule);
+  padding: 6px 10px;
+  text-align: left;
+}
+.rte-table th {
+  background: var(--bg-2);
+  font-weight: 600;
+}
+.rte-table td { background: var(--paper); }
+
+.rte-img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+  margin: 0.5em 0;
+}
+
+/* Collapsed state */
+.rte-collapsed {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  min-height: 40px;
+  border: 1px dashed var(--rule);
+  border-radius: var(--radius);
+  background: var(--bg);
+  cursor: pointer;
+  transition: border-color 0.12s, background 0.12s;
+}
+.rte-collapsed:hover {
+  border-color: var(--accent-edge);
+  background: var(--paper);
+}
+.rte-collapsed-placeholder {
+  font-size: 13px;
+  color: var(--ink-3);
+}
+
 /* ---------- Import / Export dialog ---------- */
 .ie-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); align-items: stretch; }
 .ie-tab {

webapp/index-style-v2.html

@@ -101,6 +101,11 @@ html[data-theme="dark"] .restore-warn-title { color: oklch(0.92 0.05 75); }
 html[data-theme="dark"] .restore-warn-body  { color: oklch(0.78 0.04 70); }
 html[data-theme="dark"] .restore-warn-body code { background: oklch(0 0 0 / 0.30); }
 html[data-theme="dark"] .drag-handle { color: oklch(0.50 0.005 60); }
+html[data-theme="dark"] .rte-toolbar { background: oklch(0.25 0.010 60); }
+html[data-theme="dark"] .rte-code-block,
+html[data-theme="dark"] .rte-inline-code { background: oklch(0.25 0.010 60); }
+html[data-theme="dark"] .rte-table th { background: oklch(0.25 0.010 60); }
+html[data-theme="dark"] .rte-table td { background: oklch(0.22 0.008 60); }
 
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; height: 100%; }
@@ -1061,6 +1066,197 @@ input { font: inherit; color: inherit; }
   background: var(--bg-2); color: var(--ink-2);
 }
 
+/* ---------- Rich Text Editor ---------- */
+.rte-wrap {
+  border: 1px solid var(--rule);
+  border-radius: var(--radius);
+  background: var(--bg);
+  overflow: hidden;
+  transition: border-color 0.12s, box-shadow 0.12s;
+}
+.rte-wrap:focus-within {
+  border-color: var(--accent-edge);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+  background: var(--paper);
+}
+
+.rte-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--rule);
+  background: var(--bg-2);
+  flex-wrap: wrap;
+}
+.rte-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink-2);
+  background: transparent;
+  transition: background 0.1s, color 0.1s;
+}
+.rte-toolbar button:hover {
+  background: var(--paper);
+  color: var(--ink);
+}
+.rte-toolbar-sep {
+  width: 1px;
+  height: 18px;
+  background: var(--rule);
+  margin: 0 4px;
+}
+.rte-copy-btn {
+  width: auto !important;
+  padding: 0 6px;
+  gap: 3px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.rte-copy-menu {
+  position: fixed;
+  background: var(--paper);
+  border: 1px solid var(--rule);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-pop);
+  padding: 4px;
+  z-index: 100;
+  min-width: 160px;
+}
+.rte-copy-menu button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 7px 10px;
+  border-radius: 4px;
+  font-size: 12.5px;
+  color: var(--ink);
+}
+.rte-copy-menu button:hover {
+  background: var(--accent-soft);
+  color: var(--accent-deep);
+}
+
+.rte-editor {
+  min-height: 80px;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--ink);
+  outline: none;
+}
+.rte-editor:empty::before {
+  content: attr(data-placeholder);
+  color: var(--ink-3);
+  pointer-events: none;
+}
+.rte-editor p { margin: 0 0 0.75em; }
+.rte-editor p:last-child { margin-bottom: 0; }
+.rte-editor h1, .rte-editor h2, .rte-editor h3 {
+  margin: 0.8em 0 0.4em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+.rte-editor h1:first-child,
+.rte-editor h2:first-child,
+.rte-editor h3:first-child { margin-top: 0; }
+.rte-editor h1 { font-size: 1.3em; }
+.rte-editor h2 { font-size: 1.15em; }
+.rte-editor h3 { font-size: 1em; }
+.rte-editor ul, .rte-editor ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+.rte-editor li { margin: 0.25em 0; }
+.rte-editor a {
+  color: var(--accent-deep);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.rte-editor a:hover { color: var(--accent); }
+.rte-editor strong { font-weight: 600; }
+.rte-editor em { font-style: italic; }
+
+.rte-inline-code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  padding: 1px 5px;
+  background: var(--bg-2);
+  border-radius: 3px;
+  color: var(--ink);
+}
+.rte-code-block {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  padding: 10px 12px;
+  background: var(--bg-2);
+  border-radius: var(--radius);
+  margin: 0.75em 0;
+  overflow-x: auto;
+  white-space: pre;
+}
+.rte-code-block code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
+
+.rte-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.75em 0;
+  font-size: 12.5px;
+}
+.rte-table th, .rte-table td {
+  border: 1px solid var(--rule);
+  padding: 6px 10px;
+  text-align: left;
+}
+.rte-table th {
+  background: var(--bg-2);
+  font-weight: 600;
+}
+.rte-table td { background: var(--paper); }
+
+.rte-img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+  margin: 0.5em 0;
+}
+
+/* Collapsed state */
+.rte-collapsed {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  min-height: 40px;
+  border: 1px dashed var(--rule);
+  border-radius: var(--radius);
+  background: var(--bg);
+  cursor: pointer;
+  transition: border-color 0.12s, background 0.12s;
+}
+.rte-collapsed:hover {
+  border-color: var(--accent-edge);
+  background: var(--paper);
+}
+.rte-collapsed-placeholder {
+  font-size: 13px;
+  color: var(--ink-3);
+}
+
 /* ---------- Import / Export dialog ---------- */
 .ie-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); align-items: stretch; }
 .ie-tab {
@@ -1576,7 +1772,7 @@ function filterTree(items, f) {
     }
     if (f.text) {
       const q = f.text.toLowerCase();
-      const hay = [it.title, it.reason, ...(it.tags || [])].filter(Boolean).join(" ").toLowerCase();
+      const hay = [it.title, it.body, it.reason, ...(it.tags || [])].filter(Boolean).join(" ").toLowerCase();
       if (!hay.includes(q)) return false;
     }
     return true;
@@ -2286,6 +2482,197 @@ function ProgressGauge({
     className: "gauge-num"
   }, v, "%"));
 }
+
+// ---- Markdown ↔ HTML conversion (lightweight, no external deps) ----
+const MarkdownUtils = {
+  // Convert markdown to HTML for rendering in editor
+  toHtml(md) {
+    if (!md) return '';
+    let html = md;
+
+    // Escape HTML entities first
+    html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+    // Code blocks (``` ... ```) - must be before inline code
+    html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => `<pre class="rte-code-block" data-lang="${lang}"><code>${code.trim()}</code></pre>`);
+
+    // Tables
+    html = html.replace(/^\|(.+)\|\s*\n\|[-:| ]+\|\s*\n((?:\|.+\|\s*\n?)+)/gm, (_, header, body) => {
+      const headers = header.split('|').map(c => c.trim()).filter(Boolean);
+      const rows = body.trim().split('\n').map(row => row.split('|').map(c => c.trim()).filter(Boolean));
+      return `<table class="rte-table"><thead><tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr></thead><tbody>${rows.map(r => `<tr>${r.map(c => `<td>${c}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
+    });
+
+    // Images (base64 or URL)
+    html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" class="rte-img">');
+
+    // Links
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+
+    // Bold **text** or __text__
+    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');
+
+    // Italic *text* or _text_ (not inside words)
+    html = html.replace(/(?<![*\w])\*([^*\n]+)\*(?![*\w])/g, '<em>$1</em>');
+    html = html.replace(/(?<![_\w])_([^_\n]+)_(?![_\w])/g, '<em>$1</em>');
+
+    // Inline code `code`
+    html = html.replace(/`([^`]+)`/g, '<code class="rte-inline-code">$1</code>');
+
+    // Headings
+    html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+    html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+    html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+
+    // Lists - unordered
+    html = html.replace(/^[-*] (.+)$/gm, '<li data-list="ul">$1</li>');
+    // Lists - ordered
+    html = html.replace(/^\d+\. (.+)$/gm, '<li data-list="ol">$1</li>');
+
+    // Wrap consecutive list items
+    html = html.replace(/((?:<li data-list="ul">.+<\/li>\s*)+)/g, '<ul>$1</ul>');
+    html = html.replace(/((?:<li data-list="ol">.+<\/li>\s*)+)/g, '<ol>$1</ol>');
+    html = html.replace(/ data-list="[uo]l"/g, '');
+
+    // Paragraphs - wrap remaining text blocks
+    html = html.split('\n\n').map(block => {
+      block = block.trim();
+      if (!block) return '';
+      if (/^<(h[1-3]|ul|ol|pre|table|p)/.test(block)) return block;
+      if (block.includes('<')) return block; // Already has HTML
+      return `<p>${block.replace(/\n/g, '<br>')}</p>`;
+    }).join('\n');
+    return html;
+  },
+  // Convert HTML from editor back to markdown
+  toMarkdown(html) {
+    if (!html) return '';
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    return this._nodeToMd(doc.body).trim();
+  },
+  _nodeToMd(node) {
+    let md = '';
+    for (const child of node.childNodes) {
+      if (child.nodeType === Node.TEXT_NODE) {
+        md += child.textContent;
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        const tag = child.tagName.toLowerCase();
+        const inner = this._nodeToMd(child);
+        switch (tag) {
+          case 'strong':
+          case 'b':
+            md += `**${inner}**`;
+            break;
+          case 'em':
+          case 'i':
+            md += `*${inner}*`;
+            break;
+          case 'code':
+            if (child.parentElement?.tagName === 'PRE') md += inner;else md += `\`${inner}\``;
+            break;
+          case 'pre':
+            md += `\`\`\`\n${inner}\n\`\`\`\n\n`;
+            break;
+          case 'a':
+            md += `[${inner}](${child.getAttribute('href') || ''})`;
+            break;
+          case 'img':
+            md += `![${child.getAttribute('alt') || ''}](${child.getAttribute('src') || ''})`;
+            break;
+          case 'h1':
+            md += `# ${inner}\n\n`;
+            break;
+          case 'h2':
+            md += `## ${inner}\n\n`;
+            break;
+          case 'h3':
+            md += `### ${inner}\n\n`;
+            break;
+          case 'p':
+            md += `${inner}\n\n`;
+            break;
+          case 'br':
+            md += '\n';
+            break;
+          case 'li':
+            md += `- ${inner}\n`;
+            break;
+          case 'ul':
+          case 'ol':
+            md += inner + '\n';
+            break;
+          case 'table':
+            md += this._tableToMd(child) + '\n\n';
+            break;
+          case 'thead':
+          case 'tbody':
+          case 'tr':
+          case 'th':
+          case 'td':
+            md += inner;
+            break;
+          case 'div':
+            md += inner + '\n';
+            break;
+          default:
+            md += inner;
+        }
+      }
+    }
+    return md;
+  },
+  _tableToMd(table) {
+    const rows = Array.from(table.querySelectorAll('tr'));
+    if (!rows.length) return '';
+    const lines = [];
+    rows.forEach((row, i) => {
+      const cells = Array.from(row.querySelectorAll('th, td')).map(c => c.textContent.trim());
+      lines.push('| ' + cells.join(' | ') + ' |');
+      if (i === 0) lines.push('|' + cells.map(() => '---').join('|') + '|');
+    });
+    return lines.join('\n');
+  },
+  // Convert HTML to plain text
+  toPlainText(html) {
+    if (!html) return '';
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    return doc.body.textContent || '';
+  }
+};
+
+// ---- Clipboard utilities for multiple formats ----
+const ClipboardUtils = {
+  // Copy to clipboard with multiple formats (HTML primary, plain text also)
+  async copyHtml(html, markdown) {
+    const plain = MarkdownUtils.toPlainText(html);
+    try {
+      // Modern API: write multiple formats
+      await navigator.clipboard.write([new ClipboardItem({
+        'text/html': new Blob([html], {
+          type: 'text/html'
+        }),
+        'text/plain': new Blob([plain], {
+          type: 'text/plain'
+        })
+      })]);
+      return true;
+    } catch {
+      // Fallback: plain text only
+      await navigator.clipboard.writeText(plain);
+      return true;
+    }
+  },
+  async copyMarkdown(markdown) {
+    await navigator.clipboard.writeText(markdown);
+    return true;
+  },
+  async copyPlainText(html) {
+    const plain = MarkdownUtils.toPlainText(html);
+    await navigator.clipboard.writeText(plain);
+    return true;
+  }
+};
 Object.assign(window, {
   STATUSES,
   STATUS_BY_KEY,
@@ -2316,7 +2703,9 @@ Object.assign(window, {
   progressFor,
   shouldShowProgress,
   cycleProgress,
-  ProgressGauge
+  ProgressGauge,
+  MarkdownUtils,
+  ClipboardUtils
 });
 </script>
   <script>
@@ -2403,9 +2792,29 @@ const Parser = {
     const stack = [{
       children: entries,
       depth: -1,
-      level: 0
+      level: 0,
+      item: null
     }];
-    for (const line of entriesText.split('\n')) {
+    const lines = entriesText.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+
+      // Check for body line (starts with whitespace + "> ")
+      const bodyMatch = line.match(/^(\s*)>\s?(.*)$/);
+      if (bodyMatch) {
+        // Body line - attach to current item at matching depth
+        const bodyDepth = bodyMatch[1].length / 2;
+        const bodyLine = bodyMatch[2];
+        // Find the item at this depth
+        for (let j = stack.length - 1; j >= 0; j--) {
+          if (stack[j].depth === bodyDepth && stack[j].item) {
+            if (!stack[j].item.body) stack[j].item.body = '';else stack[j].item.body += '\n';
+            stack[j].item.body += bodyLine;
+            break;
+          }
+        }
+        continue;
+      }
       const m = line.match(/^(\s*)[-*]\s*\[([ x!>/\-])\]\s*(.*)$/);
       if (!m) continue;
       const depth = m[1].length / 2;
@@ -2444,13 +2853,15 @@ const Parser = {
         tags,
         progress: status === 'done' ? 100 : progress,
         collapsed: false,
-        children: []
+        children: [],
+        body: null
       };
       stack[stack.length - 1].children.push(item);
       stack.push({
         children: item.children,
         depth,
-        level: item.level
+        level: item.level,
+        item
       });
     }
     return {
@@ -2493,6 +2904,12 @@ const Parser = {
       const metaStr = meta.length ? ` *(${meta.join(', ')})*` : '';
       const prefix = it.priority ? `[${it.priority}] ` : '';
       lines.push(`${indent}- [${GLYPH[it.status] || ' '}] ${prefix}${it.title}${metaStr}`);
+      // Serialize body as indented blockquote lines
+      if (it.body) {
+        for (const bodyLine of it.body.split('\n')) {
+          lines.push(`${indent}> ${bodyLine}`);
+        }
+      }
       if (it.children?.length) {
         lines.push(...this._serializeEntries(it.children, depth + 1).split('\n'));
       }
@@ -4209,8 +4626,388 @@ window.BacklogTree = BacklogTree;
 const {
   useState: useStateD,
   useEffect: useEffectD,
-  useRef: useRefD
+  useRef: useRefD,
+  useCallback: useCallbackD
 } = React;
+
+// ---- Rich Text Editor (lightweight WYSIWYG using contenteditable) ----
+function RichTextEditor({
+  value,
+  onChange,
+  placeholder = "Add details...",
+  collapsed = false,
+  onExpand
+}) {
+  const editorRef = useRefD(null);
+  const [isExpanded, setIsExpanded] = useStateD(!collapsed || !!value);
+  const [showCopyMenu, setShowCopyMenu] = useStateD(false);
+  const [copyMenuPos, setCopyMenuPos] = useStateD({
+    x: 0,
+    y: 0
+  });
+  const toolbarRef = useRefD(null);
+
+  // Initialize editor content
+  useEffectD(() => {
+    if (editorRef.current && value !== undefined) {
+      const html = MarkdownUtils.toHtml(value || '');
+      if (editorRef.current.innerHTML !== html) {
+        editorRef.current.innerHTML = html;
+      }
+    }
+  }, [value]);
+  const handleInput = useCallbackD(() => {
+    if (editorRef.current) {
+      const md = MarkdownUtils.toMarkdown(editorRef.current.innerHTML);
+      onChange?.(md || null);
+    }
+  }, [onChange]);
+  const execCmd = useCallbackD((cmd, val = null) => {
+    editorRef.current?.focus();
+    document.execCommand(cmd, false, val);
+    handleInput();
+  }, [handleInput]);
+  const handleKeyDown = useCallbackD(e => {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      execCmd('insertText', '  ');
+    }
+    // Ctrl/Cmd + B/I/K shortcuts
+    if (e.ctrlKey || e.metaKey) {
+      if (e.key === 'b') {
+        e.preventDefault();
+        execCmd('bold');
+      }
+      if (e.key === 'i') {
+        e.preventDefault();
+        execCmd('italic');
+      }
+      if (e.key === 'k') {
+        e.preventDefault();
+        insertLink();
+      }
+    }
+  }, [execCmd]);
+  const insertLink = useCallbackD(() => {
+    const url = prompt('Enter URL:');
+    if (url) execCmd('createLink', url);
+  }, [execCmd]);
+  const insertImage = useCallbackD(() => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.onchange = async e => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = () => {
+        execCmd('insertHTML', `<img src="${reader.result}" alt="${file.name}" class="rte-img">`);
+      };
+      reader.readAsDataURL(file);
+    };
+    input.click();
+  }, [execCmd]);
+  const insertTable = useCallbackD(() => {
+    const html = '<table class="rte-table"><thead><tr><th>Header 1</th><th>Header 2</th></tr></thead><tbody><tr><td>Cell 1</td><td>Cell 2</td></tr></tbody></table><p><br></p>';
+    execCmd('insertHTML', html);
+  }, [execCmd]);
+  const insertCodeBlock = useCallbackD(() => {
+    execCmd('insertHTML', '<pre class="rte-code-block"><code>code here</code></pre><p><br></p>');
+  }, [execCmd]);
+  const handleCopyMenu = useCallbackD(e => {
+    e.preventDefault();
+    const rect = e.currentTarget.getBoundingClientRect();
+    setCopyMenuPos({
+      x: rect.left,
+      y: rect.bottom + 4
+    });
+    setShowCopyMenu(true);
+  }, []);
+  const copyAs = useCallbackD(async format => {
+    setShowCopyMenu(false);
+    const html = editorRef.current?.innerHTML || '';
+    const md = MarkdownUtils.toMarkdown(html);
+    if (format === 'html') await ClipboardUtils.copyHtml(html, md);else if (format === 'markdown') await ClipboardUtils.copyMarkdown(md);else if (format === 'text') await ClipboardUtils.copyPlainText(html);
+  }, []);
+  const expand = useCallbackD(() => {
+    setIsExpanded(true);
+    onExpand?.();
+    setTimeout(() => editorRef.current?.focus(), 50);
+  }, [onExpand]);
+
+  // Close copy menu on outside click
+  useEffectD(() => {
+    if (!showCopyMenu) return;
+    const close = () => setShowCopyMenu(false);
+    document.addEventListener('click', close);
+    return () => document.removeEventListener('click', close);
+  }, [showCopyMenu]);
+  if (!isExpanded) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "rte-collapsed",
+      onClick: expand
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "rte-collapsed-placeholder"
+    }, placeholder), /*#__PURE__*/React.createElement(Icon, {
+      name: "plus",
+      size: 12
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "rte-wrap"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "rte-toolbar",
+    ref: toolbarRef
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => execCmd('bold'),
+    title: "Bold (Ctrl+B)"
+  }, /*#__PURE__*/React.createElement("strong", null, "B")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => execCmd('italic'),
+    title: "Italic (Ctrl+I)"
+  }, /*#__PURE__*/React.createElement("em", null, "I")), /*#__PURE__*/React.createElement("span", {
+    className: "rte-toolbar-sep"
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: insertLink,
+    title: "Link (Ctrl+K)"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 12l4-4M6 10l-1 1a3 3 0 0 0 4.24 4.24l1-1M14 10l1-1a3 3 0 0 0-4.24-4.24l-1 1",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: "rte-toolbar-sep"
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => execCmd('formatBlock', 'h1'),
+    title: "Heading 1"
+  }, "H1"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => execCmd('formatBlock', 'h2'),
+    title: "Heading 2"
+  }, "H2"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => execCmd('formatBlock', 'h3'),
+    title: "Heading 3"
+  }, "H3"), /*#__PURE__*/React.createElement("span", {
+    className: "rte-toolbar-sep"
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => execCmd('insertUnorderedList'),
+    title: "Bullet list"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: "8",
+    y1: "6",
+    x2: "17",
+    y2: "6"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "8",
+    y1: "10",
+    x2: "17",
+    y2: "10"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "8",
+    y1: "14",
+    x2: "17",
+    y2: "14"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "4",
+    cy: "6",
+    r: "1",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "4",
+    cy: "10",
+    r: "1",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "4",
+    cy: "14",
+    r: "1",
+    fill: "currentColor"
+  })))), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => execCmd('insertOrderedList'),
+    title: "Numbered list"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: "8",
+    y1: "6",
+    x2: "17",
+    y2: "6"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "8",
+    y1: "10",
+    x2: "17",
+    y2: "10"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "8",
+    y1: "14",
+    x2: "17",
+    y2: "14"
+  }), /*#__PURE__*/React.createElement("text", {
+    x: "3",
+    y: "7",
+    fontSize: "5",
+    fill: "currentColor",
+    stroke: "none"
+  }, "1"), /*#__PURE__*/React.createElement("text", {
+    x: "3",
+    y: "11",
+    fontSize: "5",
+    fill: "currentColor",
+    stroke: "none"
+  }, "2"), /*#__PURE__*/React.createElement("text", {
+    x: "3",
+    y: "15",
+    fontSize: "5",
+    fill: "currentColor",
+    stroke: "none"
+  }, "3")))), /*#__PURE__*/React.createElement("span", {
+    className: "rte-toolbar-sep"
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: insertCodeBlock,
+    title: "Code block"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("polyline", {
+    points: "7,5 3,10 7,15"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "13,5 17,10 13,15"
+  })))), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: insertTable,
+    title: "Table"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "3",
+    y: "4",
+    width: "14",
+    height: "12",
+    rx: "1.5"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "3",
+    y1: "8",
+    x2: "17",
+    y2: "8"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "10",
+    y1: "8",
+    x2: "10",
+    y2: "16"
+  })))), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: insertImage,
+    title: "Image"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "3",
+    y: "4",
+    width: "14",
+    height: "12",
+    rx: "1.5"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "7",
+    cy: "8",
+    r: "1.5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3 14l4-4 3 3 4-4 3 3"
+  })))), /*#__PURE__*/React.createElement("span", {
+    className: "rte-toolbar-sep"
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: handleCopyMenu,
+    title: "Copy as...",
+    className: "rte-copy-btn"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "copy",
+    size: 12
+  }), /*#__PURE__*/React.createElement("svg", {
+    width: "8",
+    height: "8",
+    viewBox: "0 0 10 10"
+  }, /*#__PURE__*/React.createElement("polyline", {
+    points: "2,4 5,7 8,4",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })))), showCopyMenu && /*#__PURE__*/React.createElement("div", {
+    className: "rte-copy-menu",
+    style: {
+      left: copyMenuPos.x,
+      top: copyMenuPos.y
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => copyAs('html')
+  }, "Copy for Docs/Word"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => copyAs('markdown')
+  }, "Copy as Markdown"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => copyAs('text')
+  }, "Copy as Plain Text")), /*#__PURE__*/React.createElement("div", {
+    ref: editorRef,
+    className: "rte-editor",
+    contentEditable: true,
+    onInput: handleInput,
+    onKeyDown: handleKeyDown,
+    "data-placeholder": placeholder,
+    onContextMenu: e => {
+      // Allow default context menu but add copy options via showCopyMenu
+    }
+  }));
+}
 function Dialog({
   open,
   onClose,
@@ -4285,6 +5082,7 @@ function ItemDialog({
   recentTags = []
 }) {
   const [title, setTitle] = useStateD("");
+  const [body, setBody] = useStateD(null);
   const [priority, setPriority] = useStateD("P2");
   const [status, setStatus] = useStateD("open");
   const [due, setDue] = useStateD("");
@@ -4296,6 +5094,7 @@ function ItemDialog({
   useEffectD(() => {
     if (!open) return;
     setTitle(initial?.title || "");
+    setBody(initial?.body || null);
     setPriority(initial?.priority || "P2");
     setStatus(initial?.status || "open");
     setDue(initial?.due || "");
@@ -4320,6 +5119,7 @@ function ItemDialog({
     if (status === "done") outProgress = 100;
     onSubmit({
       title: title.trim(),
+      body: body || null,
       priority,
       status,
       due: due || null,
@@ -4354,6 +5154,17 @@ function ItemDialog({
     onChange: e => setTitle(e.target.value),
     placeholder: "What needs to happen?",
     required: true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "field-label"
+  }, "Details ", /*#__PURE__*/React.createElement("span", {
+    className: "field-hint"
+  }, "rich text, supports markdown")), /*#__PURE__*/React.createElement(RichTextEditor, {
+    value: body,
+    onChange: setBody,
+    placeholder: "Add notes, context, or details...",
+    collapsed: !body
   })), /*#__PURE__*/React.createElement("div", {
     className: "field-row"
   }, /*#__PURE__*/React.createElement("div", {
@@ -4638,6 +5449,7 @@ function TagMatchHL({
 window.Dialog = Dialog;
 window.ItemDialog = ItemDialog;
 window.ConfirmDialog = ConfirmDialog;
+window.RichTextEditor = RichTextEditor;
 </script>
   <script>
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }