@dreki-gg/pi-plan-mode 0.14.2 → 0.14.5

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @dreki-gg/pi-plan-mode
 
+## 0.14.5
+
+### Patch Changes
+
+- Proper markdown rendering in plan.html — fenced code blocks, inline code, bold, italic, links, and all heading levels.
+
+## 0.14.4
+
+### Patch Changes
+
+- Remove task list widget entirely — plan.jsonl is the source of truth.
+
+## 0.14.3
+
+### Patch Changes
+
+- Only show task widget during active plan execution, not after exiting plan mode.
+
 ## 0.14.2
 
 ### Patch Changes

package/extensions/plan-mode/html/render.ts

@@ -24,39 +24,83 @@ function markdownToHtml(markdown: string): string {
   const lines = markdown.split(/\r?\n/);
   const html: string[] = [];
   let inList = false;
+  let inCode = false;
+  let codeLang = '';
+  const codeLines: string[] = [];
 
   for (const line of lines) {
-    if (line.startsWith('# ')) {
-      if (inList) {
-        html.push('</ul>');
-        inList = false;
+    // Fenced code blocks
+    if (line.startsWith('```')) {
+      if (!inCode) {
+        if (inList) { html.push('</ul>'); inList = false; }
+        inCode = true;
+        codeLang = line.slice(3).trim();
+        codeLines.length = 0;
+      } else {
+        const langAttr = codeLang ? ` class="language-${escapeHtml(codeLang)}"` : '';
+        html.push(`<pre><code${langAttr}>${codeLines.map(escapeHtml).join('\n')}</code></pre>`);
+        inCode = false;
+        codeLang = '';
       }
-      html.push(`<h1>${escapeHtml(line.slice(2))}</h1>`);
-    } else if (line.startsWith('## ')) {
-      if (inList) {
-        html.push('</ul>');
-        inList = false;
-      }
-      html.push(`<h2>${escapeHtml(line.slice(3))}</h2>`);
-    } else if (line.startsWith('- ')) {
-      if (!inList) {
-        html.push('<ul>');
-        inList = true;
-      }
-      html.push(`<li>${escapeHtml(line.slice(2))}</li>`);
-    } else if (line.trim()) {
-      if (inList) {
-        html.push('</ul>');
-        inList = false;
-      }
-      html.push(`<p>${escapeHtml(line)}</p>`);
+      continue;
+    }
+
+    if (inCode) {
+      codeLines.push(line);
+      continue;
+    }
+
+    // Headings
+    const headingMatch = line.match(/^(#{1,6})\s+(.*)$/);
+    if (headingMatch) {
+      if (inList) { html.push('</ul>'); inList = false; }
+      const level = headingMatch[1].length;
+      html.push(`<h${level}>${inlineMarkdown(escapeHtml(headingMatch[2]))}</h${level}>`);
+      continue;
     }
+
+    // List items (- or *)
+    const listMatch = line.match(/^\s*[-*]\s+(.*)$/);
+    if (listMatch) {
+      if (!inList) { html.push('<ul>'); inList = true; }
+      html.push(`<li>${inlineMarkdown(escapeHtml(listMatch[1]))}</li>`);
+      continue;
+    }
+
+    // Blank line
+    if (!line.trim()) {
+      if (inList) { html.push('</ul>'); inList = false; }
+      continue;
+    }
+
+    // Paragraph
+    if (inList) { html.push('</ul>'); inList = false; }
+    html.push(`<p>${inlineMarkdown(escapeHtml(line))}</p>`);
   }
 
+  // Close unclosed blocks
+  if (inCode) {
+    html.push(`<pre><code>${codeLines.map(escapeHtml).join('\n')}</code></pre>`);
+  }
   if (inList) html.push('</ul>');
   return html.join('\n');
 }
 
+/** Converts inline markdown (bold, italic, inline code, links) in already-escaped HTML. */
+function inlineMarkdown(text: string): string {
+  return text
+    // Inline code: `code`
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    // Bold: **text** or __text__
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/__(.+?)__/g, '<strong>$1</strong>')
+    // Italic: *text* or _text_
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/_(.+?)_/g, '<em>$1</em>')
+    // Links: [text](url)
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+}
+
 function escapeHtml(value: string): string {
   return value
     .replaceAll('&', '&amp;')

package/extensions/plan-mode/html/templates/plan.pug

@@ -17,6 +17,16 @@ html(lang="en")
       section { background:rgba(17,20,27,0.82); border:1px solid var(--line); border-radius:18px; padding:22px; margin:18px 0; box-shadow:0 24px 80px rgba(0,0,0,0.24); }
       .handoff :first-child { margin-top:0; }
       .handoff :last-child { margin-bottom:0; }
+      .handoff pre { background:#161922; border:1px solid var(--line); border-radius:10px; padding:14px 16px; overflow-x:auto; margin:12px 0; }
+      .handoff pre code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; color:#c7ccda; background:none; padding:0; border:none; border-radius:0; }
+      .handoff code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; background:rgba(139,92,246,0.12); color:var(--accent); padding:2px 6px; border-radius:5px; }
+      .handoff strong { font-weight:650; }
+      .handoff a { color:var(--accent); text-decoration:none; }
+      .handoff a:hover { text-decoration:underline; }
+      .handoff h1, .handoff h3, .handoff h4 { font-size:15px; text-transform:uppercase; color:var(--muted); letter-spacing:0.14em; margin:20px 0 10px; }
+      .handoff p { margin:8px 0; }
+      .handoff ul { margin:8px 0; padding-left:20px; }
+      .handoff li { margin:4px 0; }
       .tasks { display:grid; gap:12px; }
       .task { border:1px solid var(--line); border-radius:14px; padding:16px; background:#0f1218; }
       .task-top { display:flex; gap:10px; align-items:center; margin-bottom:8px; }

package/extensions/plan-mode/ui.ts

@@ -22,25 +22,6 @@ export function updateUI(state: PlanModeState, ctx: ExtensionContext): void {
     ctx.ui.setStatus('plan-mode', undefined);
   }
 
-  const allResolved =
-    state.plan?.tasks.every((t) => t.status === 'done' || t.status === 'skipped' || t.status === 'blocked') ?? false;
-
-  if ((state.executing || state.plan) && state.plan && !allResolved) {
-    const lines = state.plan.tasks.map((task) => {
-      const label = `${task.id} ${task.description}`;
-      switch (task.status) {
-        case 'done':
-          return theme.fg('success', '✓ ') + theme.fg('muted', theme.strikethrough(label));
-        case 'skipped':
-          return theme.fg('warning', '⊘ ') + theme.fg('muted', theme.strikethrough(label));
-        case 'blocked':
-          return theme.fg('error', '✗ ') + theme.fg('error', label);
-        default:
-          return theme.fg('muted', '☐ ') + label;
-      }
-    });
-    ctx.ui.setWidget('plan-todos', lines);
-  } else {
-    ctx.ui.setWidget('plan-todos', undefined);
-  }
+  // Task list lives in plan.jsonl — no widget needed.
+  ctx.ui.setWidget('plan-todos', undefined);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreki-gg/pi-plan-mode",
-  "version": "0.14.2",
+  "version": "0.14.5",
   "description": "Two-phase planning workflow for pi — plan with claude-opus-4-6:medium, execute with gpt-5.5:low, with .plans/ file-based handoff",
   "keywords": [
     "pi-package"