@dreki-gg/pi-pr-canvas 1.6.0

package/extensions/pr-canvas/canvas/sections/comments.ts

@@ -0,0 +1,98 @@
+import type { PrComment, PrReview } from '../../github/types';
+import { escapeHtml } from '../template';
+
+export function renderComments(comments: PrComment[], reviews: PrReview[]): string {
+  const hasContent = comments.length > 0 || reviews.length > 0;
+
+  if (!hasContent) {
+    return `
+      <section class="canvas-section" id="section-comments">
+        <button class="section-toggle">
+          <span class="chevron">▼</span>
+          <span class="section-title">💬 Comments &amp; Reviews</span>
+        </button>
+        <div class="section-body">
+          <p style="color: var(--text-muted);">No comments or reviews.</p>
+        </div>
+      </section>`;
+  }
+
+  const reviewCards = reviews.map(renderReviewCard).join('\n');
+  const commentCards = comments.map(renderCommentCard).join('\n');
+
+  return `
+    <section class="canvas-section" id="section-comments">
+      <button class="section-toggle">
+        <span class="chevron">▼</span>
+        <span class="section-title">💬 Comments &amp; Reviews</span>
+        <span style="color: var(--text-muted); font-size: 0.8rem; font-weight: 400;">${reviews.length} review${reviews.length === 1 ? '' : 's'}, ${comments.length} comment${comments.length === 1 ? '' : 's'}</span>
+      </button>
+      <div class="section-body">
+        ${reviews.length > 0 ? `<h4 style="color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 0.5rem;">Reviews</h4>${reviewCards}` : ''}
+        ${comments.length > 0 ? `<h4 style="color: var(--text-secondary); font-size: 0.85rem; margin: 1rem 0 0.5rem;">Comments</h4>${commentCards}` : ''}
+      </div>
+    </section>`;
+}
+
+function renderReviewCard(review: PrReview): string {
+  const stateBadge = renderReviewBadge(review.state);
+  const inlineComments = review.comments.map(renderInlineComment).join('');
+
+  return `
+    <div class="comment-card">
+      <div class="comment-header">
+        ${stateBadge}
+        <span class="comment-author">${escapeHtml(review.author.login)}</span>
+        <span class="comment-time">${formatDate(review.createdAt)}</span>
+      </div>
+      ${review.body ? `<div class="comment-body"><p>${escapeHtml(review.body)}</p></div>` : ''}
+      ${inlineComments}
+    </div>`;
+}
+
+function renderInlineComment(comment: PrComment): string {
+  const location = comment.path
+    ? `<div class="comment-file">${escapeHtml(comment.path)}${comment.line ? `:${comment.line}` : ''}</div>`
+    : '';
+
+  return `
+    <div style="border-top: 1px solid var(--border);">
+      <div class="comment-header">
+        ${location}
+        <span class="comment-author">${escapeHtml(comment.author.login)}</span>
+        <span class="comment-time">${formatDate(comment.createdAt)}</span>
+      </div>
+      <div class="comment-body"><p>${escapeHtml(comment.body)}</p></div>
+    </div>`;
+}
+
+function renderCommentCard(comment: PrComment): string {
+  return `
+    <div class="comment-card">
+      <div class="comment-header">
+        <span class="comment-author">${escapeHtml(comment.author.login)}</span>
+        <span class="comment-time">${formatDate(comment.createdAt)}</span>
+      </div>
+      <div class="comment-body"><p>${escapeHtml(comment.body)}</p></div>
+    </div>`;
+}
+
+function renderReviewBadge(state: string): string {
+  const label = state.toLowerCase().replace(/_/g, ' ');
+  const cls = `badge badge-sm badge-${state.toLowerCase()}`;
+  return `<span class="${cls}">${escapeHtml(label)}</span>`;
+}
+
+function formatDate(iso: string): string {
+  if (!iso) return '';
+  try {
+    return new Date(iso).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  } catch {
+    return iso;
+  }
+}

package/extensions/pr-canvas/canvas/sections/diff-preview.ts

@@ -0,0 +1,42 @@
+import type { PrFile } from '../../github/types';
+
+/**
+ * Render the diff preview section.
+ *
+ * Embeds the raw unified diff as JSON data for @pierre/diffs to consume
+ * via the module script in the template. The library handles syntax highlighting,
+ * split/unified views, and all diff rendering.
+ */
+export function renderDiffPreview(files: PrFile[], rawDiff: string): string {
+  if (files.length === 0) {
+    return `
+      <section class="canvas-section" id="section-diff-preview">
+        <button class="section-toggle">
+          <span class="chevron">▼</span>
+          <span class="section-title">📝 Diff Preview</span>
+        </button>
+        <div class="section-body">
+          <p style="color: var(--text-muted);">No diffs to show.</p>
+        </div>
+      </section>`;
+  }
+
+  // Escape the raw diff for safe embedding in a JSON script tag
+  const escapedDiff = JSON.stringify(rawDiff);
+
+  return `
+    <section class="canvas-section" id="section-diff-preview">
+      <button class="section-toggle">
+        <span class="chevron">▼</span>
+        <span class="section-title">📝 Diff Preview</span>
+        <span style="color: var(--text-muted); font-size: 0.8rem; font-weight: 400;">${files.length} file${files.length === 1 ? '' : 's'}</span>
+      </button>
+      <div class="section-body">
+        <div class="pierre-diff-controls">
+          <button id="diff-layout-toggle" class="pierre-control-btn">Split View</button>
+        </div>
+        <div id="pierre-diffs-container"></div>
+      </div>
+      <script type="application/json" id="pierre-diff-data">${escapedDiff}</script>
+    </section>`;
+}

package/extensions/pr-canvas/canvas/sections/file-tree.ts

@@ -0,0 +1,67 @@
+import type { PrFile } from '../../github/types';
+
+/**
+ * Render the file tree section.
+ *
+ * Embeds file paths and git status as JSON data for @pierre/trees to consume
+ * via the module script in the template. The library handles tree rendering,
+ * directory flattening, and git status badges.
+ */
+export function renderFileTree(files: PrFile[]): string {
+  if (files.length === 0) {
+    return `
+      <section class="canvas-section" id="section-file-tree">
+        <button class="section-toggle">
+          <span class="chevron">▼</span>
+          <span class="section-title">📁 File Tree</span>
+        </button>
+        <div class="section-body">
+          <p style="color: var(--text-muted);">No files changed.</p>
+        </div>
+      </section>`;
+  }
+
+  // Build the data structure for @pierre/trees
+  const treeData = {
+    paths: files.map((f) => f.path),
+    gitStatus: buildGitStatus(files),
+  };
+
+  return `
+    <section class="canvas-section" id="section-file-tree">
+      <button class="section-toggle">
+        <span class="chevron">▼</span>
+        <span class="section-title">📁 File Tree</span>
+        <span style="color: var(--text-muted); font-size: 0.8rem; font-weight: 400;">${files.length} file${files.length === 1 ? '' : 's'}</span>
+      </button>
+      <div class="section-body">
+        <div id="pierre-tree-container" style="height: ${Math.min(files.length * 28 + 40, 500)}px;"></div>
+      </div>
+      <script type="application/json" id="pierre-tree-data">${JSON.stringify(treeData)}</script>
+    </section>`;
+}
+
+/**
+ * Map PrFile statuses to @pierre/trees gitStatus format.
+ * Keys are file paths, values are git status strings.
+ */
+function buildGitStatus(files: PrFile[]): Record<string, string> {
+  const status: Record<string, string> = {};
+  for (const file of files) {
+    switch (file.status) {
+      case 'added':
+        status[file.path] = 'added';
+        break;
+      case 'modified':
+        status[file.path] = 'modified';
+        break;
+      case 'deleted':
+        status[file.path] = 'deleted';
+        break;
+      case 'renamed':
+        status[file.path] = 'renamed';
+        break;
+    }
+  }
+  return status;
+}

package/extensions/pr-canvas/canvas/sections/mind-map.ts

@@ -0,0 +1,46 @@
+import type { MindMapGroup } from '../../ai/types';
+import { escapeHtml } from '../template';
+
+export function renderMindMap(groups: MindMapGroup[]): string {
+  if (groups.length === 0) {
+    return `
+      <section class="canvas-section" id="section-mind-map">
+        <button class="section-toggle">
+          <span class="chevron">▼</span>
+          <span class="section-title">🧠 Mind Map</span>
+        </button>
+        <div class="section-body">
+          <p style="color: var(--text-muted);">No semantic groupings available.</p>
+        </div>
+      </section>`;
+  }
+
+  const cards = groups.map(renderGroupCard).join('\n');
+
+  return `
+    <section class="canvas-section" id="section-mind-map">
+      <button class="section-toggle">
+        <span class="chevron">▼</span>
+        <span class="section-title">🧠 Mind Map</span>
+        <span style="color: var(--text-muted); font-size: 0.8rem; font-weight: 400;">${groups.length} group${groups.length === 1 ? '' : 's'}</span>
+      </button>
+      <div class="section-body">
+        <div class="mind-groups">${cards}</div>
+      </div>
+    </section>`;
+}
+
+function renderGroupCard(group: MindMapGroup): string {
+  const badgeClass = `badge badge-sm badge-${group.changeType}`;
+  const files = group.files.map((f) => `<li>${escapeHtml(f)}</li>`).join('');
+
+  return `
+    <div class="mind-group">
+      <div class="mind-group-header">
+        <span class="${badgeClass}">${escapeHtml(group.changeType)}</span>
+        <span class="mind-group-label">${escapeHtml(group.label)}</span>
+      </div>
+      <div class="mind-group-desc">${escapeHtml(group.description)}</div>
+      <ul class="mind-group-files">${files}</ul>
+    </div>`;
+}

package/extensions/pr-canvas/canvas/sections/overview.ts

@@ -0,0 +1,109 @@
+import type { PrOverview } from '../../github/types';
+import { escapeHtml } from '../template';
+
+export function renderOverview(pr: PrOverview): string {
+  const stateBadge = renderStateBadge(pr.state);
+  const labels = pr.labels
+    .map(
+      (l) =>
+        `<span class="badge badge-label" style="border-color: #${l.color}40">${escapeHtml(l.name)}</span>`,
+    )
+    .join(' ');
+  const reviewers = pr.reviewers.map((r) => escapeHtml(r.login)).join(', ') || 'None';
+  const body = renderMarkdownBasic(pr.body);
+
+  return `
+    <section class="canvas-section" id="section-overview">
+      <button class="section-toggle">
+        <span class="chevron">▼</span>
+        <span class="section-title">Overview</span>
+      </button>
+      <div class="section-body">
+        <div style="margin-bottom: 0.5rem;">
+          <span style="color: var(--text-muted); font-size: 1.1rem;">#${pr.number}</span>
+          <h2 style="font-size: 1.4rem; margin: 0.2rem 0;">${escapeHtml(pr.title)}</h2>
+        </div>
+        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem;">
+          ${stateBadge}
+          ${labels}
+        </div>
+        <div class="meta-row">
+          <span class="meta-item">👤 ${escapeHtml(pr.author.login)}</span>
+          <span class="meta-item">🔀 ${escapeHtml(pr.baseRefName)} ← ${escapeHtml(pr.headRefName)}</span>
+          <span class="meta-item">
+            <span class="stat-add">+${pr.additions}</span>
+            <span class="stat-del">−${pr.deletions}</span>
+          </span>
+          <span class="meta-item">👁 ${escapeHtml(reviewers)}</span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-item">Created: ${formatDate(pr.createdAt)}</span>
+          <span class="meta-item">Updated: ${formatDate(pr.updatedAt)}</span>
+          <span class="meta-item"><a href="${escapeHtml(pr.url)}" style="color: var(--accent);" target="_blank">View on GitHub ↗</a></span>
+        </div>
+        ${body ? `<div class="pr-body">${body}</div>` : ''}
+      </div>
+    </section>`;
+}
+
+function renderStateBadge(state: string): string {
+  const s = state.toUpperCase();
+  if (s === 'MERGED') return '<span class="badge badge-merged">Merged</span>';
+  if (s === 'CLOSED') return '<span class="badge badge-closed">Closed</span>';
+  return '<span class="badge badge-open">Open</span>';
+}
+
+function formatDate(iso: string): string {
+  if (!iso) return '';
+  try {
+    return new Date(iso).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  } catch {
+    return iso;
+  }
+}
+
+/** Very basic markdown → HTML (no external deps) */
+function renderMarkdownBasic(md: string): string {
+  if (!md?.trim()) return '';
+  let html = escapeHtml(md);
+
+  // Code blocks (```...```)
+  html = html.replace(/```[\s\S]*?```/g, (match) => {
+    const code = match.replace(/^```\w*\n?/, '').replace(/\n?```$/, '');
+    return `<pre><code>${code}</code></pre>`;
+  });
+
+  // Inline code
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  // Headers
+  html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+  html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+  html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+
+  // Lists
+  html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
+  html = html.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
+
+  // Bold and italic
+  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+
+  // Links
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+
+  // Blockquotes
+  html = html.replace(/^&gt; (.+)$/gm, '<blockquote>$1</blockquote>');
+
+  // Paragraphs
+  html = html.replace(/\n\n/g, '</p><p>');
+  html = `<p>${html}</p>`;
+  // Clean up empty paragraphs
+  html = html.replace(/<p>\s*<\/p>/g, '');
+
+  return html;
+}