@iceinvein/agent-skills 0.1.24 → 0.1.26

package/skills/magpie/scripts/__tests__/render-cmd.test.ts

@@ -69,3 +69,49 @@ test('findings render with no findings json shows empty state', async () => {
   const html = await Bun.file(join(runDir, 'screen', 'findings.html')).text()
   expect(html).toContain('No findings')
 })
+
+test('findings render includes files and diff when provided', async () => {
+  await writeFile(
+    join(runDir, 'findings.final.json'),
+    JSON.stringify([
+      {
+        id: 'a',
+        file: 'src/app.ts',
+        line: 5,
+        severity: 'high',
+        risk: { impact: 'high', likelihood: 'likely', confidence: 'high', action: 'must-fix' },
+        title: 'test finding',
+        description: 'd',
+        domain: 'bugs',
+      },
+    ]),
+  )
+  await writeFile(
+    join(runDir, 'pr.json'),
+    JSON.stringify({
+      number: 1234,
+      headRefName: 'feature-x',
+      headRefOid: 'deadbeef',
+      files: [
+        { path: 'src/app.ts', additions: 10, deletions: 2 },
+        { path: 'src/util.ts', additions: 5, deletions: 0 },
+      ],
+    }),
+  )
+  await writeFile(
+    join(runDir, 'diff.patch'),
+    `--- a/src/app.ts
++++ b/src/app.ts
+@@ -1,3 +1,6 @@
+ function hello() {
++  console.log('added');
++  console.log('more');
+ }
+`,
+  )
+  const exit = await runRender(runDir, 'findings')
+  expect(exit).toBe(0)
+  const html = await Bun.file(join(runDir, 'screen', 'findings.html')).text()
+  expect(html).toContain('data-file-pane="src/app.ts"')
+  expect(html).toContain('data-file-pane="src/util.ts"')
+})

package/skills/magpie/scripts/__tests__/render-diff.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, test } from 'bun:test'
+import { parseUnifiedDiffToHunks } from '../diff-utils.ts'
+import { renderSplitDiff, renderUnifiedDiff } from '../render-diff.ts'
+import type { ReviewFinding } from '../types.ts'
+
+const DIFF = `--- a/x.ts
++++ b/x.ts
+@@ -1,3 +1,4 @@
+ line1
+-old
++new
++added
+ line3
+`
+
+const finding: ReviewFinding = {
+  id: 'f-1',
+  file: 'x.ts',
+  line: 2,
+  severity: 'high',
+  title: 't',
+  description: 'd',
+  risk: { impact: 'high', likelihood: 'likely', confidence: 'high', action: 'should-fix' },
+  domain: 'bugs',
+}
+
+describe('renderUnifiedDiff', () => {
+  test('emits one row per diff line', () => {
+    const html = renderUnifiedDiff({
+      hunks: parseUnifiedDiffToHunks(DIFF),
+      findings: [],
+      postStatus: {},
+      selectedIds: new Set(),
+    })
+    expect((html.match(/class="diff-row/g) ?? []).length).toBe(5)
+  })
+
+  test('places annotations after the matching new-line', () => {
+    const hunks = parseUnifiedDiffToHunks(DIFF)
+    const html = renderUnifiedDiff({
+      hunks,
+      findings: [finding],
+      postStatus: {},
+      selectedIds: new Set(),
+    })
+    const idx = html.indexOf('data-finding-id="f-1"')
+    const before = html.lastIndexOf('class="diff-row', idx)
+    const newRowSnippet = html.slice(before, idx)
+    expect(newRowSnippet).toContain('class="diff-row added"')
+  })
+
+  test('emits a "no diff" placeholder when hunks is empty', () => {
+    const html = renderUnifiedDiff({
+      hunks: [],
+      findings: [],
+      postStatus: {},
+      selectedIds: new Set(),
+    })
+    expect(html).toContain('No changes')
+  })
+
+  test('renders posted findings with data-posted="true"', () => {
+    const html = renderUnifiedDiff({
+      hunks: parseUnifiedDiffToHunks(DIFF),
+      findings: [finding],
+      postStatus: { 'f-1': 'posted' },
+      selectedIds: new Set(),
+    })
+    expect(html).toContain('data-posted="true"')
+  })
+})
+
+describe('renderSplitDiff', () => {
+  test('emits left/right cells per row', () => {
+    const html = renderSplitDiff({
+      hunks: parseUnifiedDiffToHunks(DIFF),
+      findings: [],
+      postStatus: {},
+      selectedIds: new Set(),
+    })
+    expect((html.match(/diff-row split/g) ?? []).length).toBeGreaterThan(0)
+    expect(html).toContain('diff-cell')
+  })
+})

package/skills/magpie/scripts/__tests__/render-file-tree.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, test } from 'bun:test'
+import { renderFileTree } from '../render-file-tree.ts'
+import type { PrFileEntry, ReviewFinding } from '../types.ts'
+
+const files: PrFileEntry[] = [
+  { path: 'src/a.ts', additions: 5, deletions: 1 },
+  { path: 'src/b.ts', additions: 2, deletions: 0 },
+  { path: 'README.md', additions: 3, deletions: 0 },
+]
+
+const findings: ReviewFinding[] = [
+  {
+    id: '1',
+    file: 'src/a.ts',
+    line: 1,
+    severity: 'blocker',
+    title: 't',
+    description: 'd',
+    risk: { impact: 'high', likelihood: 'likely', confidence: 'high', action: 'must-fix' },
+    domain: 'security',
+  },
+] as ReviewFinding[]
+
+describe('renderFileTree', () => {
+  test('emits a button per file with data-file attribute', () => {
+    const html = renderFileTree({ files, findings })
+    expect(html).toContain('data-file="src/a.ts"')
+    expect(html).toContain('data-file="src/b.ts"')
+    expect(html).toContain('data-file="README.md"')
+  })
+
+  test('emits +adds -dels deltas per file', () => {
+    const html = renderFileTree({ files, findings })
+    expect(html).toContain('+5')
+    expect(html).toContain('-1')
+  })
+
+  test('emits severity pip counts on files that have findings', () => {
+    const html = renderFileTree({ files, findings })
+    expect(html).toMatch(/data-file="src\/a\.ts"[\s\S]*?sev-pip blocker[\s\S]*?>1</)
+  })
+
+  test('renders an Overview entry as data-file=""', () => {
+    const html = renderFileTree({ files, findings })
+    expect(html).toContain('data-file=""')
+    expect(html).toContain('Overview')
+  })
+
+  test('collapses single-child directory chains', () => {
+    const f: PrFileEntry[] = [{ path: 'apps/server/lib/x.ts', additions: 1, deletions: 0 }]
+    const html = renderFileTree({ files: f, findings: [] })
+    expect(html).toContain('apps/server/lib')
+  })
+})

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

@@ -22,243 +22,165 @@ function f(p: Partial<ReviewFinding> & { id: string; title: string }): ReviewFin
   }
 }
 
-test('empty findings renders an explicit empty state', () => {
+const SAMPLE_FINDINGS: ReviewFinding[] = [
+  f({ id: 'a', title: 'null deref', severity: 'high', file: 'src/a.ts', line: 2 }),
+  f({
+    id: 'b',
+    title: 'magic number',
+    severity: 'low',
+    file: 'src/a.ts',
+    line: 4,
+    risk: { impact: 'low', likelihood: 'unknown', confidence: 'medium', action: 'optional' },
+  }),
+]
+
+const SAMPLE_DIFF = `--- a/src/a.ts
++++ b/src/a.ts
+@@ -1,3 +1,4 @@
+ line1
+-old
++new
++added
+ line3
+`
+
+test('empty findings renders the page shell with an empty-state message', () => {
   const html = renderFindingsHtml({ findings: [], postStatus: {} })
+  expect(html).toContain('class="pr-header"')
   expect(html).toContain('No findings')
 })
 
-test('renders one finding with severity chip and post button', () => {
-  const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'null deref', severity: 'high' })],
-    postStatus: {},
-  })
-  expect(html).toContain('null deref')
-  expect(html).toContain('sev-high')
-  expect(html).toContain('data-finding-id="a"')
-  expect(html).toContain('data-action="post"')
+test('emits the two-tab segmented control with Files and All Issues buttons', () => {
+  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {} })
+  expect(html).toContain('data-action="set-view"')
+  expect(html).toContain('data-view="files"')
+  expect(html).toContain('data-view="all-issues"')
 })
 
-test('shows posted badge when present in postStatus', () => {
-  const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'x' })],
-    postStatus: { a: 'posted' },
-  })
-  expect(html).toContain('class="badge posted"')
-})
-
-test('shows failed badge with message', () => {
-  const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'x' })],
-    postStatus: { a: { status: 'failed', message: 'rate limit' } },
-  })
-  expect(html).toContain('class="badge failed"')
-  expect(html).toContain('rate limit')
+test('sets body data attributes for default view, diff-mode, and suggestions visibility', () => {
+  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {} })
+  expect(html).toContain('data-page="findings"')
+  expect(html).toContain('data-view="files"')
+  expect(html).toContain('data-diff-mode="unified"')
+  expect(html).toContain('data-show-suggestions="false"')
 })
 
-test('renders suggestion block when present, with a "Suggested change" caption', () => {
+test('renders one file pane per PrFileEntry, hidden by default', () => {
   const html = renderFindingsHtml({
-    findings: [
-      f({
-        id: 'a',
-        title: 'x',
-        suggestion: { body: 'if (!y) return', startLine: 10, endLine: 11 },
-      }),
-    ],
+    findings: SAMPLE_FINDINGS,
     postStatus: {},
-  })
-  expect(html).toContain('if (!y) return')
-  expect(html).toContain('Suggested change')
-  expect(html).toContain('class="finding-suggestion-wrap"')
-})
-
-test('parses labelled paragraphs into section headers', () => {
-  const html = renderFindingsHtml({
-    findings: [
-      f({
-        id: 'a',
-        title: 'unsafe userId',
-        description:
-          'Observation: trusts client-supplied userId.\n\nWhy it matters: cross-tenant exposure.\n\nSuggested direction: read from auth context.',
-      }),
+    files: [
+      { path: 'src/a.ts', additions: 3, deletions: 1 },
+      { path: 'src/b.ts', additions: 1, deletions: 0 },
     ],
-    postStatus: {},
+    diff: SAMPLE_DIFF,
   })
-  expect(html).toContain('class="finding-section finding-section-observation"')
-  expect(html).toContain('class="finding-section finding-section-impact"')
-  expect(html).toContain('class="finding-section finding-section-suggestion"')
-  expect(html).toContain('>Observation</h4>')
-  expect(html).toContain('>Why it matters</h4>')
-  expect(html).toContain('>Suggested direction</h4>')
-  expect(html).toContain('>trusts client-supplied userId.</p>')
+  expect(html).toContain('data-file-pane="src/a.ts"')
+  expect(html).toContain('data-file-pane="src/b.ts"')
+  expect(html).toMatch(/data-file-pane="src\/a\.ts"[^>]*hidden/)
 })
 
-test('renders the risk footer with Impact/Likelihood/Confidence/Action', () => {
-  const html = renderFindingsHtml({
-    findings: [
-      f({
-        id: 'a',
-        title: 'x',
-        risk: { impact: 'high', likelihood: 'likely', confidence: 'high', action: 'should-fix' },
-      }),
-    ],
-    postStatus: {},
-  })
-  expect(html).toContain('class="finding-risk"')
-  expect(html).toContain('Impact <strong>high</strong>')
-  expect(html).toContain('Likelihood <strong>likely</strong>')
-  expect(html).toContain('Confidence <strong>high</strong>')
-  expect(html).toContain('Action <strong>should-fix</strong>')
+test('renders an Overview pane mapped to data-file-pane=""', () => {
+  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {} })
+  expect(html).toContain('data-file-pane=""')
 })
 
-test('falls back to a single observation when description has no labels', () => {
+test('renders a per-file toolbar with breadcrumb, deltas, finding-nav and diff-mode toggle', () => {
   const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'x', description: 'Just one sentence.' })],
+    findings: SAMPLE_FINDINGS,
     postStatus: {},
+    files: [{ path: 'src/a.ts', additions: 3, deletions: 1 }],
+    diff: SAMPLE_DIFF,
   })
-  expect(html).toContain('finding-section-observation')
-  expect(html).toContain('>Just one sentence.</p>')
+  expect(html).toContain('+3')
+  expect(html).toContain('-1')
+  expect(html).toContain('data-action="prev-finding"')
+  expect(html).toContain('data-action="next-finding"')
+  expect(html).toContain('data-action="set-diff-mode"')
+  expect(html).toContain('data-mode="unified"')
+  expect(html).toContain('data-mode="split"')
 })
 
-test('includes the archived-mode banner element so file:// view can self-degrade', () => {
+test('renders both unified and split diff containers per file', () => {
   const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'x' })],
+    findings: SAMPLE_FINDINGS,
     postStatus: {},
+    files: [{ path: 'src/a.ts', additions: 3, deletions: 1 }],
+    diff: SAMPLE_DIFF,
   })
-  expect(html).toContain('archived-banner')
-  expect(html).toContain('Archived view')
+  expect(html).toContain('data-diff-mode="unified"')
+  expect(html).toContain('data-diff-mode="split"')
 })
 
-test('renders a severity-breakdown summary line', () => {
+test('places an inline annotation at the affected diff line', () => {
   const html = renderFindingsHtml({
-    findings: [
-      f({ id: 'a', title: 't1', severity: 'high' }),
-      f({ id: 'b', title: 't2', severity: 'high' }),
-      f({ id: 'c', title: 't3', severity: 'low' }),
-    ],
+    findings: SAMPLE_FINDINGS,
     postStatus: {},
+    files: [{ path: 'src/a.ts', additions: 3, deletions: 1 }],
+    diff: SAMPLE_DIFF,
   })
-  expect(html).toContain('findings-summary')
-  expect(html).toContain('2</span>&nbsp;high')
-  expect(html).toContain('1</span>&nbsp;low')
+  expect(html).toContain('data-finding-id="a"')
+  expect(html).toContain('class="annot')
 })
 
-test('post button starts disabled (enabled by helper.js after first select)', () => {
-  const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'x' })],
-    postStatus: {},
-  })
-  expect(html).toMatch(/<button[^>]*data-action="post"[^>]*disabled/)
+test('mounts the All Issues pane', () => {
+  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {} })
+  expect(html).toContain('data-role="issues-list"')
 })
 
-test('renders a filter bar with severity and domain chips when findings exist', () => {
-  const html = renderFindingsHtml({
-    findings: [
-      f({ id: 'a', title: 't1', severity: 'high', domain: 'bugs' }),
-      f({ id: 'b', title: 't2', severity: 'high', domain: 'security' }),
-      f({ id: 'c', title: 't3', severity: 'low', domain: 'bugs' }),
-    ],
-    postStatus: {},
-  })
-  // The bar
-  expect(html).toContain('class="filter-bar"')
-  // Search input
-  expect(html).toMatch(/<input[^>]+type="search"[^>]+data-role="search"/)
-  // Severity chips with counts
-  expect(html).toMatch(/data-filter-group="sev"[^>]+data-filter-value="high"/)
-  expect(html).toMatch(/data-filter-group="sev"[^>]+data-filter-value="low"/)
-  // Domain chips
-  expect(html).toMatch(/data-filter-group="domain"[^>]+data-filter-value="bugs"/)
-  expect(html).toMatch(/data-filter-group="domain"[^>]+data-filter-value="security"/)
-  // Each chip carries its current count
-  expect(html).toMatch(/<span class="filter-chip-count">2<\/span>/) // high count
-  expect(html).toMatch(/<span class="filter-chip-count">1<\/span>/) // low count
+test('mounts the action bar at the page bottom', () => {
+  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {} })
+  expect(html).toContain('data-role="action-bar"')
+  expect(html).toContain('Post Recommended')
 })
 
-test('exposes bulk select actions and a keyboard-shortcut hint', () => {
+test('marks posted findings with data-posted="true"', () => {
   const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'x' })],
-    postStatus: {},
+    findings: SAMPLE_FINDINGS,
+    postStatus: { a: 'posted' },
   })
-  expect(html).toMatch(/data-action="select-visible"/)
-  expect(html).toMatch(/data-action="select-priority"/)
-  expect(html).toMatch(/data-action="select-none"/)
-  expect(html).toContain('class="kbd-hint"')
-  expect(html).toContain('<kbd>j</kbd>')
-  expect(html).toContain('<kbd>/</kbd>')
+  expect(html).toContain('data-posted="true"')
 })
 
-test('threads runId into a data-run-id attribute on body', () => {
+test('renders the suggestion code block in the annotation', () => {
   const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'x' })],
+    findings: [
+      f({
+        id: 'x',
+        title: 'with patch',
+        suggestion: { body: 'if (!y) return', startLine: 10, endLine: 11 },
+      }),
+    ],
     postStatus: {},
-    runId: 'pr-42-1700000000',
   })
-  expect(html).toMatch(/<body[^>]+data-run-id="pr-42-1700000000"/)
+  expect(html).toContain('if (!y) return')
+  expect(html).toContain('Suggested change')
 })
 
-test('each finding card carries severity/domain/file/search-text data attrs for client-side filtering', () => {
+test('parses labelled paragraphs into section headers', () => {
   const html = renderFindingsHtml({
     findings: [
       f({
         id: 'a',
-        title: 'race in handler',
-        severity: 'high',
-        domain: 'bugs',
-        file: 'src/main.ts',
-        description: 'fire-and-forget promise',
+        title: 'unsafe userId',
+        description:
+          'Observation: client picks userId.\n\nWhy it matters: leak risk.\n\nSuggested direction: drop arg.',
       }),
     ],
     postStatus: {},
   })
-  expect(html).toMatch(/data-severity="high"/)
-  expect(html).toMatch(/data-domain="bugs"/)
-  expect(html).toMatch(/data-file="src\/main\.ts"/)
-  expect(html).toMatch(/data-search-text="[^"]*race in handler[^"]*fire-and-forget promise/)
-})
-
-test('post button label is "Post to PR" and triggers the confirm flow', () => {
-  const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'x' })],
-    postStatus: {},
-  })
-  expect(html).toMatch(/<button[^>]*data-action="post"[^>]*>Post to PR<\/button>/)
-})
-
-test('renders the inline confirm popup (hidden until user clicks Post to PR)', () => {
-  const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'x' })],
-    postStatus: {},
-  })
-  // It is anchored to the Post to PR button, not a separate row.
-  expect(html).toContain('class="post-button-group"')
-  expect(html).toMatch(/<div\s+class="confirm-popup"\s+data-role="confirm-bar"[^>]*hidden[^>]*>/)
-  expect(html).toContain('data-action="cancel-post"')
-  expect(html).toContain('data-action="confirm-post"')
-})
-
-test('lede explains the server-side post flow (not the terminal reply)', () => {
-  const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'x' })],
-    postStatus: {},
-  })
-  expect(html).toMatch(/Post to PR/)
-  expect(html).toMatch(/<code>gh<\/code>/)
-})
-
-test('renders a polite submit-status region for transient queue/error feedback', () => {
-  const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'x' })],
-    postStatus: {},
-  })
-  expect(html).toMatch(
-    /<p\s+class="submit-status"\s+data-role="submit-status"\s+role="status"\s+aria-live="polite"\s+hidden>/,
-  )
+  expect(html).toContain('Observation')
+  expect(html).toContain('Why it matters')
+  expect(html).toContain('Suggested direction')
 })
 
-test('renders a no-matches placeholder for the client-side filter to reveal', () => {
+test('renders pr meta when supplied', () => {
   const html = renderFindingsHtml({
-    findings: [f({ id: 'a', title: 'x' })],
+    findings: SAMPLE_FINDINGS,
     postStatus: {},
+    pr: { number: 42, branch: 'feat/x', headSha: 'deadbeefdeadbeef0000111122223333' },
   })
-  expect(html).toMatch(/data-role="no-matches"[^>]+hidden/)
+  expect(html).toContain('PR #42')
+  expect(html).toContain('feat/x')
+  expect(html).toContain('deadbeefdead')
 })

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

@@ -0,0 +1,67 @@
+import { describe, expect, test } from 'bun:test'
+import { renderIssuesList } from '../render-issues-list.ts'
+import type { ReviewFinding } from '../types.ts'
+
+const findings: ReviewFinding[] = [
+  {
+    id: '1',
+    file: 'a.ts',
+    line: 1,
+    severity: 'blocker',
+    title: 'A',
+    description: 'd',
+    risk: { impact: 'high', likelihood: 'likely', confidence: 'high', action: 'must-fix' },
+    domain: 'security',
+  },
+  {
+    id: '2',
+    file: 'b.ts',
+    line: 1,
+    severity: 'high',
+    title: 'B',
+    description: 'd',
+    risk: { impact: 'high', likelihood: 'likely', confidence: 'high', action: 'should-fix' },
+    domain: 'bugs',
+  },
+  {
+    id: '3',
+    file: 'c.ts',
+    line: 1,
+    severity: 'low',
+    title: 'C',
+    description: 'd',
+    risk: { impact: 'low', likelihood: 'unknown', confidence: 'medium', action: 'optional' },
+    domain: 'code-smells',
+  },
+] as ReviewFinding[]
+
+describe('renderIssuesList', () => {
+  test('renders an issue-card per finding', () => {
+    const html = renderIssuesList({ findings, postStatus: {}, selectedIds: new Set() })
+    expect((html.match(/class="issue-card/g) ?? []).length).toBe(3)
+  })
+
+  test('renders severity filter pills with counts', () => {
+    const html = renderIssuesList({ findings, postStatus: {}, selectedIds: new Set() })
+    expect(html).toContain('Blocker (1)')
+    expect(html).toContain('High (1)')
+    expect(html).toContain('Low (1)')
+  })
+
+  test('emits "N should review" with actionable count only', () => {
+    const html = renderIssuesList({ findings, postStatus: {}, selectedIds: new Set() })
+    expect(html).toContain('2 should review')
+  })
+
+  test('emits "Show N suggestions" toggle when suggestions present', () => {
+    const html = renderIssuesList({ findings, postStatus: {}, selectedIds: new Set() })
+    expect(html).toContain('Show 1 suggestion')
+  })
+
+  test('suggestion finding has data-suggestion="true"', () => {
+    const html = renderIssuesList({ findings, postStatus: {}, selectedIds: new Set() })
+    expect(html).toMatch(
+      /data-finding-id="3"[^>]*data-suggestion="true"|data-suggestion="true"[^>]*data-finding-id="3"/,
+    )
+  })
+})