@iceinvein/agent-skills 0.1.24 → 0.1.26

package/skills/magpie/scripts/render-findings.ts

@@ -1,19 +1,34 @@
 import { readFile } from 'node:fs/promises'
 import { basename } from 'node:path'
-import { parseFindingDescription } from './finding-description.ts'
-import { type ReviewFinding, SEVERITIES, type Severity } from './types.ts'
-
-export type PostStatusEntry = 'posted' | { status: 'failed'; message: string }
-export type PostStatusMap = Record<string, PostStatusEntry>
+import { parseUnifiedDiffToHunks, splitDiffByFile } from './diff-utils.ts'
+import { renderActionBar } from './render-action-bar.ts'
+import { renderSplitDiff, renderUnifiedDiff } from './render-diff.ts'
+import { renderFileTree } from './render-file-tree.ts'
+import { renderIssuesList } from './render-issues-list.ts'
+import type { PostStatusMap, PrFileEntry, ReviewFinding } from './types.ts'
+
+export type { PostStatusEntry, PostStatusMap } from './types.ts'
+
+export type FindingsPrMeta = {
+  number: number
+  branch: string
+  headSha: string
+}
 
 export type RenderFindingsInput = {
   findings: ReviewFinding[]
   postStatus: PostStatusMap
   /** Stable id used as the localStorage selection key. Defaults to "unknown" for tests. */
   runId?: string
+  /** Optional PR identity. When present, the header shows PR #N, branch, sha. */
+  pr?: FindingsPrMeta
+  /** Files changed in the PR, used to build the file tree and diff panes. */
+  files?: PrFileEntry[]
+  /** Raw unified diff text for the PR. */
+  diff?: string
 }
 
-function escapeHtml(s: string): string {
+function esc(s: string): string {
   return s.replace(/[&<>"']/g, (c) => {
     const m: Record<string, string> = {
       '&': '&amp;',
@@ -22,236 +37,192 @@ function escapeHtml(s: string): string {
       '"': '&quot;',
       "'": '&#39;',
     }
-    return m[c] as string
+    return m[c] ?? c
   })
 }
 
-function badge(status: PostStatusEntry | undefined): string {
-  if (!status) return ''
-  if (status === 'posted') return '<span class="badge posted">posted</span>'
-  return `<span class="badge failed">failed: ${escapeHtml(status.message)}</span>`
-}
-
-function severityBreakdown(findings: ReviewFinding[]): string {
-  const counts: Record<Severity, number> = { blocker: 0, high: 0, medium: 0, low: 0 }
-  for (const f of findings) counts[f.severity] += 1
-  return SEVERITIES.filter((k) => counts[k] > 0)
-    .map((k) => `<span class="num">${counts[k]}</span>&nbsp;${k}`)
-    .join(' &nbsp;·&nbsp; ')
-}
+const BRAND_MARK_SVG = `<svg class="brand-mark" viewBox="0 0 24 24" aria-hidden="true" fill="none">
+  <path d="M3 17.5 C 6.5 7.5, 13 6, 17.5 11 L 21 16.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M11.5 12.5 L 21 16.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+  <circle class="magpie-eye" cx="6.5" cy="13.5" r="1.1"/>
+</svg>`
 
-function countBy<T extends string>(
-  findings: ReviewFinding[],
-  pick: (f: ReviewFinding) => T,
-): Map<T, number> {
-  const m = new Map<T, number>()
-  for (const f of findings) {
-    const k = pick(f)
-    m.set(k, (m.get(k) ?? 0) + 1)
-  }
-  return m
+function brandBlock(): string {
+  return `<div class="brand">${BRAND_MARK_SVG}<span class="brand-text">magpie</span></div>`
 }
 
-function filterChip(
-  group: 'sev' | 'domain',
-  value: string,
-  count: number,
-  label: string,
-  severity?: Severity,
-): string {
-  const sevAttr = severity ? ` data-severity="${severity}"` : ''
-  return `<button type="button" class="filter-chip" data-filter-group="${group}" data-filter-value="${escapeHtml(value)}"${sevAttr} aria-pressed="false">
-    <span class="filter-chip-label">${escapeHtml(label)}</span>
-    <span class="filter-chip-count">${count}</span>
-  </button>`
+function prHeader(input: RenderFindingsInput): string {
+  const pr = input.pr
+  const prMeta = pr
+    ? `<div class="pr-meta">
+        <span class="pr-number">PR #${pr.number}</span>
+        <span class="pr-branch">${esc(pr.branch)}</span>
+        <code>${esc(pr.headSha.slice(0, 12))}</code>
+      </div>`
+    : `<div class="pr-meta"></div>`
+  const total = input.findings.length
+  return `<header class="pr-header">
+    ${brandBlock()}
+    ${prMeta}
+    <div class="header-spacer"></div>
+    <div class="segmented" data-role="tabs">
+      <button type="button" data-action="set-view" data-view="files" aria-pressed="true">Files</button>
+      <button type="button" data-action="set-view" data-view="all-issues" aria-pressed="false">All Issues <span class="seg-count">(${total})</span></button>
+    </div>
+  </header>`
 }
 
-function filterBar(findings: ReviewFinding[]): string {
-  const sevCounts = countBy(findings, (f) => f.severity)
-  const domainCounts = countBy(findings, (f) => (f.domain as string) ?? 'unknown')
-  const sevChips = SEVERITIES.filter((s) => (sevCounts.get(s) ?? 0) > 0)
-    .map((s) => filterChip('sev', s, sevCounts.get(s) ?? 0, s, s))
-    .join('')
-  const domainChips = Array.from(domainCounts.entries())
-    .sort((a, b) => b[1] - a[1])
-    .map(([d, n]) => filterChip('domain', d, n, d))
-    .join('')
-
-  return `<section class="filter-bar" aria-label="filter and search">
-    <div class="search-row">
-      <label class="search-field">
-        <span class="search-icon" aria-hidden="true">⌕</span>
-        <input
-          type="search"
-          data-role="search"
-          placeholder="search title, file, or description"
-          aria-label="search findings"
-          autocomplete="off"
-          spellcheck="false"
-        />
-        <kbd class="search-hint">/</kbd>
-      </label>
-    </div>
-    <div class="chip-row" data-role="filter-row" data-group="sev">
-      <span class="chip-row-label">severity</span>
-      ${sevChips}
-    </div>
-    <div class="chip-row" data-role="filter-row" data-group="domain">
-      <span class="chip-row-label">domain</span>
-      ${domainChips}
-    </div>
-    <div class="filter-state">
-      <span data-role="filter-status">showing all <span class="num" data-role="visible-count">${findings.length}</span> of <span class="num">${findings.length}</span></span>
-      <button type="button" class="link-btn" data-action="clear-filters" hidden>clear filters</button>
+function filePane(opts: {
+  file: PrFileEntry
+  fileDiff: string
+  findings: ReviewFinding[]
+  postStatus: PostStatusMap
+  selectedIds: Set<string>
+}): string {
+  const hunks = parseUnifiedDiffToHunks(opts.fileDiff)
+  const unified = renderUnifiedDiff({
+    hunks,
+    findings: opts.findings,
+    postStatus: opts.postStatus,
+    selectedIds: opts.selectedIds,
+  })
+  const split = renderSplitDiff({
+    hunks,
+    findings: opts.findings,
+    postStatus: opts.postStatus,
+    selectedIds: opts.selectedIds,
+  })
+  const findingsCount = opts.findings.length
+  // Findings can't be placed inline when (a) the file isn't in the diff at all
+  // (gh truncated, or the diff endpoint didn't include it), or (b) the
+  // finding's line doesn't fall inside any visible hunk. Surface them in a
+  // banner above the diff so they don't silently vanish.
+  const hunkNewLines = new Set<number>()
+  for (const h of hunks)
+    for (const l of h.lines) if (l.newLineNo != null) hunkNewLines.add(l.newLineNo)
+  const unplaced = opts.findings.filter((f) => f.line == null || !hunkNewLines.has(f.line))
+  const unplacedBanner =
+    unplaced.length > 0
+      ? `<div class="unplaced-banner" role="note">
+          <div class="unplaced-banner-head">
+            <span class="unplaced-banner-label">${unplaced.length} finding${unplaced.length === 1 ? '' : 's'} not anchored to the diff</span>
+            <span class="unplaced-banner-hint">${hunks.length === 0 ? 'this file is not in the PR diff snapshot' : 'line falls outside the visible hunks'}</span>
+          </div>
+          ${renderIssuesList({ findings: unplaced, postStatus: opts.postStatus, selectedIds: opts.selectedIds })}
+        </div>`
+      : ''
+  return `<section class="file-pane" data-file-pane="${esc(opts.file.path)}" hidden>
+    <div class="toolbar">
+      <div class="crumb">${esc(opts.file.path)}</div>
+      <span class="delta"><span class="add">+${opts.file.additions}</span> <span class="del">-${opts.file.deletions}</span></span>
+      <div class="finding-nav" data-role="finding-nav" data-total="${findingsCount}">
+        <button type="button" data-action="prev-finding" aria-label="previous finding">&#9650;</button>
+        <span class="nav-num" data-role="nav-num">${findingsCount} findings</span>
+        <button type="button" data-action="next-finding" aria-label="next finding">&#9660;</button>
+      </div>
+      <div class="diff-mode" data-role="diff-mode">
+        <button type="button" data-action="set-diff-mode" data-mode="unified" aria-pressed="true">Unified</button>
+        <button type="button" data-action="set-diff-mode" data-mode="split" aria-pressed="false">Split</button>
+      </div>
     </div>
+    ${unplacedBanner}
+    <div class="diff-unified" data-diff-mode="unified">${unified}</div>
+    <div class="diff-split" data-diff-mode="split" hidden>${split}</div>
   </section>`
 }
 
-function findingSections(description: string): string {
-  const sections = parseFindingDescription(description)
-  if (sections.length === 0) return ''
-  return sections
-    .map(
-      (s) => `<section class="finding-section finding-section-${s.kind}">
-    <h4 class="finding-section-label">${escapeHtml(s.label)}</h4>
-    <p class="finding-section-body">${escapeHtml(s.body)}</p>
-  </section>`,
-    )
-    .join('\n  ')
-}
-
-function findingRiskFooter(f: ReviewFinding): string {
-  return `<footer class="finding-risk" aria-label="risk breakdown">
-    <span>Impact <strong>${escapeHtml(f.risk.impact)}</strong></span>
-    <span>Likelihood <strong>${escapeHtml(f.risk.likelihood)}</strong></span>
-    <span>Confidence <strong>${escapeHtml(f.risk.confidence)}</strong></span>
-    <span>Action <strong>${escapeHtml(f.risk.action)}</strong></span>
-  </footer>`
-}
-
-function findingSuggestion(f: ReviewFinding): string {
-  if (!f.suggestion) return ''
-  return `<section class="finding-suggestion-wrap">
-    <h4 class="finding-section-label">Suggested change</h4>
-    <pre class="finding-suggestion">${escapeHtml(f.suggestion.body)}</pre>
+function overviewPane(opts: {
+  findings: ReviewFinding[]
+  postStatus: PostStatusMap
+  selectedIds: Set<string>
+}): string {
+  const general = opts.findings.filter((f) => !f.file)
+  if (general.length === 0) {
+    return `<section class="overview-pane" data-file-pane="">
+      <div class="empty">No general findings. Pick a file from the rail.</div>
+    </section>`
+  }
+  return `<section class="overview-pane" data-file-pane="">
+    ${renderIssuesList({ findings: general, postStatus: opts.postStatus, selectedIds: opts.selectedIds })}
   </section>`
 }
 
-function findingCard(f: ReviewFinding, status: PostStatusEntry | undefined): string {
-  const checked = status === 'posted' ? 'checked disabled' : ''
-  const anchor = f.line != null ? `${escapeHtml(f.file)}:${f.line}` : escapeHtml(f.file)
-  const domain = (f.domain as string) ?? 'unknown'
-  return `<article class="finding" id="finding-${escapeHtml(f.id)}" tabindex="-1"
-  data-severity="${f.severity}"
-  data-domain="${escapeHtml(domain)}"
-  data-file="${escapeHtml(f.file)}"
-  data-search-text="${escapeHtml(`${f.title} ${f.description} ${f.file}`.toLowerCase())}">
-  <header class="finding-head">
-    <input type="checkbox" data-finding-id="${escapeHtml(f.id)}" ${checked} aria-label="select finding ${escapeHtml(f.id)}" />
-    <span class="sev-chip sev-${f.severity}">${f.severity}</span>
-    <h3 class="finding-title">${escapeHtml(f.title)}</h3>
-    ${badge(status)}
-  </header>
-  <div class="finding-anchor"><span class="path">${anchor}</span><span class="domain">${escapeHtml(domain)}</span></div>
-  <div class="finding-body">
-    ${findingSections(f.description)}
-    ${findingSuggestion(f)}
-  </div>
-  ${findingRiskFooter(f)}
-</article>`
-}
-
-const ARCHIVED_BANNER = `<div class="archived-banner" role="note"><strong>Archived view.</strong> The live server is gone; selections are read-only. Run <code>magpie serve &lt;run-dir&gt;</code> to bring it back.</div>`
-
-const SHORTCUTS_HINT = `<aside class="kbd-hint" aria-label="keyboard shortcuts">
-  <kbd>j</kbd>/<kbd>k</kbd> navigate
-  <kbd>x</kbd> toggle
-  <kbd>a</kbd> all visible
-  <kbd>n</kbd> clear
-  <kbd>/</kbd> search
-  <kbd>Esc</kbd> reset
-</aside>`
-
 export function renderFindingsHtml(input: RenderFindingsInput): string {
-  const { findings, postStatus } = input
   const runId = input.runId ?? 'unknown'
+  const files = input.files ?? []
+  const diff = input.diff ?? ''
+  const splitDiffs = splitDiffByFile(diff)
+  const selectedIds = new Set<string>()
 
-  if (findings.length === 0) {
+  if (input.findings.length === 0) {
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="color-scheme" content="light dark">
-<title>magpie — no findings</title>
+<title>magpie · no findings</title>
 <link rel="stylesheet" href="data:text/css;base64,STYLES_INLINE">
 </head>
-<body data-run-id="${escapeHtml(runId)}">
-${ARCHIVED_BANNER}
-<main class="page">
-  <section class="empty-state">
-    <h1>No findings</h1>
-    <p class="lede">All specialists returned cleanly and nothing survived the pipeline.</p>
-  </section>
+<body data-run-id="${esc(runId)}" data-page="findings" data-view="files" data-diff-mode="unified" data-show-suggestions="false">
+${prHeader(input)}
+<main class="page-main">
+  <div class="empty-state"><h1>No findings</h1><p>All specialists returned cleanly.</p></div>
 </main>
 <script>HELPER_INLINE</script>
 </body>
 </html>`
   }
 
-  const cards = findings.map((f) => findingCard(f, postStatus[f.id])).join('\n')
-  const breakdown = severityBreakdown(findings)
+  const filePanesHtml = files
+    .map((file) => {
+      const fileDiff = splitDiffs.get(file.path) ?? ''
+      const findingsInFile = input.findings.filter((f) => f.file === file.path)
+      return filePane({
+        file,
+        fileDiff,
+        findings: findingsInFile,
+        postStatus: input.postStatus,
+        selectedIds,
+      })
+    })
+    .join('\n')
+
+  const overviewHtml = overviewPane({
+    findings: input.findings,
+    postStatus: input.postStatus,
+    selectedIds,
+  })
+  const tree = renderFileTree({ files, findings: input.findings })
+  const issues = renderIssuesList({
+    findings: input.findings,
+    postStatus: input.postStatus,
+    selectedIds,
+  })
+  const actionBar = renderActionBar({ findings: input.findings })
 
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="color-scheme" content="light dark">
-<title>magpie — findings</title>
+<title>magpie · findings</title>
 <link rel="stylesheet" href="data:text/css;base64,STYLES_INLINE">
 </head>
-<body data-run-id="${escapeHtml(runId)}">
-${ARCHIVED_BANNER}
-<main class="page">
-  <header class="page-header">
-    <p class="eyebrow">magpie · findings</p>
-    <h1>Review</h1>
-    <p class="lede">Pick what's worth posting and click <strong>Post to PR</strong>. The server runs <code>gh</code> for each selected finding and updates the badges in place.</p>
-  </header>
-
-  <section class="findings-summary" aria-label="summary">
-    <div><span class="count">${findings.length}</span> <span class="subtle">finding${findings.length === 1 ? '' : 's'}</span></div>
-    <div class="breakdown">${breakdown}</div>
-  </section>
-
-  ${filterBar(findings)}
-
-  <section class="findings-list" data-role="findings-list">
-    ${cards}
-    <div class="no-matches" data-role="no-matches" hidden>No findings match the current filters.</div>
-  </section>
-
-  ${SHORTCUTS_HINT}
-
-  <div class="submit-bar">
-    <span class="selected-count" data-role="selected-count"><span class="num">0</span> selected</span>
-    <div class="bulk-actions">
-      <button type="button" class="link-btn" data-action="select-visible">all visible</button>
-      <button type="button" class="link-btn" data-action="select-priority">blockers + highs</button>
-      <button type="button" class="link-btn" data-action="select-none">clear</button>
-    </div>
-    <div class="post-button-group">
-      <button class="submit-btn" data-action="post" disabled>Post to PR</button>
-      <div class="confirm-popup" data-role="confirm-bar" role="dialog" aria-label="confirm post" hidden>
-        <p class="confirm-text" data-role="confirm-text"></p>
-        <div class="confirm-actions">
-          <button type="button" class="link-btn" data-action="cancel-post">Cancel</button>
-          <button type="button" class="submit-btn confirm-btn" data-action="confirm-post">Confirm post</button>
-        </div>
-      </div>
+<body data-run-id="${esc(runId)}" data-page="findings" data-view="files" data-diff-mode="unified" data-show-suggestions="false">
+${prHeader(input)}
+<main class="page-main">
+  <div class="view files-view">
+    ${tree}
+    <div class="diff-pane" data-role="diff-pane">
+      ${overviewHtml}
+      ${filePanesHtml}
     </div>
   </div>
-  <p class="submit-status" data-role="submit-status" role="status" aria-live="polite" hidden></p>
+  <div class="view issues-view">
+    ${issues}
+  </div>
 </main>
+${actionBar}
 <script>HELPER_INLINE</script>
 </body>
 </html>`
@@ -265,8 +236,6 @@ export async function renderFindingsToDisk(
   const helperPath = new URL('./helper.js', import.meta.url).pathname
   const css = await readFile(stylesPath, 'utf8')
   const helper = await readFile(helperPath, 'utf8')
-  // Derive runId from the screen output path when caller didn't supply one.
-  // out path is .../<runId>/screen/findings*.html — three segments up = runId.
   const derived = basename(outPath.replace(/\/screen\/.+$/, ''))
   const html = renderFindingsHtml({ ...input, runId: input.runId ?? derived })
     .replace(

package/skills/magpie/scripts/render-issues-list.ts

@@ -0,0 +1,78 @@
+import { renderAnnotation } from './render-annotation.ts'
+import type { PostStatusMap } from './types.ts'
+import { isSuggestion, type ReviewFinding, SEVERITIES, type Severity } from './types.ts'
+
+const SEVERITY_LABEL: Record<Severity, string> = {
+  blocker: 'Blocker',
+  high: 'High',
+  medium: 'Medium',
+  low: 'Low',
+}
+
+function esc(s: string): string {
+  return s.replace(/[&<>"']/g, (c) => {
+    const m: Record<string, string> = {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;',
+    }
+    return m[c] ?? c
+  })
+}
+
+export type RenderIssuesListInput = {
+  findings: ReviewFinding[]
+  postStatus: PostStatusMap
+  selectedIds: Set<string>
+}
+
+function severityCounts(findings: ReviewFinding[]): Map<Severity, number> {
+  const m = new Map<Severity, number>()
+  for (const f of findings) m.set(f.severity, (m.get(f.severity) ?? 0) + 1)
+  return m
+}
+
+export function renderIssuesList(input: RenderIssuesListInput): string {
+  const { findings, postStatus, selectedIds } = input
+  const actionable = findings.filter((f) => !isSuggestion(f))
+  const suggestions = findings.filter((f) => isSuggestion(f))
+  const counts = severityCounts(findings)
+  const pillsHtml = SEVERITIES.filter((s) => (counts.get(s) ?? 0) > 0)
+    .map(
+      (s) =>
+        `<button type="button" class="filter-pill sev-${s}" data-action="filter-sev" data-sev="${s}" aria-pressed="true">${esc(SEVERITY_LABEL[s])} (${counts.get(s) ?? 0})</button>`,
+    )
+    .join('')
+  const suggestionToggle =
+    suggestions.length > 0
+      ? `<button type="button" class="show-suggestions-toggle" data-action="toggle-suggestions" aria-pressed="false">Show ${suggestions.length} suggestion${suggestions.length === 1 ? '' : 's'}</button>`
+      : ''
+  const cardsHtml = findings
+    .map((f) => {
+      const status = postStatus[f.id]
+      const failed =
+        status && typeof status === 'object' && status.status === 'failed'
+          ? { message: status.message }
+          : undefined
+      return renderAnnotation(f, {
+        checked: selectedIds.has(f.id),
+        posted: status === 'posted',
+        failed,
+        asCard: true,
+      })
+    })
+    .join('\n')
+  return `<section class="issues-pane" data-role="issues-list">
+    <div class="issues-filter">
+      <span class="lead">${actionable.length} should review</span>
+      ${suggestionToggle}
+      <span class="sep"></span>
+      ${pillsHtml}
+    </div>
+    <div class="issues-list">
+      ${cardsHtml}
+    </div>
+  </section>`
+}