@iceinvein/agent-skills 0.1.31 → 0.1.32

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

@@ -1,4 +1,6 @@
-import { expect, test } from 'bun:test'
+import { beforeAll, expect, test } from 'bun:test'
+import type { Highlighter } from 'shiki'
+import { getHighlighter } from '../highlight.ts'
 import { renderFindingsHtml } from '../render-findings.ts'
 import type { ReviewFinding } from '../types.ts'
 
@@ -44,21 +46,26 @@ const SAMPLE_DIFF = `--- a/src/a.ts
  line3
 `
 
+let hl: Highlighter
+beforeAll(async () => {
+  hl = await getHighlighter()
+})
+
 test('empty findings renders the page shell with an empty-state message', () => {
-  const html = renderFindingsHtml({ findings: [], postStatus: {} })
+  const html = renderFindingsHtml({ findings: [], postStatus: {}, highlighter: hl })
   expect(html).toContain('class="pr-header"')
   expect(html).toContain('No findings')
 })
 
 test('emits the two-tab segmented control with Files and All Issues buttons', () => {
-  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {} })
+  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {}, highlighter: hl })
   expect(html).toContain('data-action="set-view"')
   expect(html).toContain('data-view="files"')
   expect(html).toContain('data-view="all-issues"')
 })
 
 test('sets body data attributes for default view, diff-mode, and suggestions visibility', () => {
-  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {} })
+  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {}, highlighter: hl })
   expect(html).toContain('data-page="findings"')
   expect(html).toContain('data-view="files"')
   expect(html).toContain('data-diff-mode="unified"')
@@ -74,6 +81,7 @@ test('renders one file pane per PrFileEntry, hidden by default', () => {
       { path: 'src/b.ts', additions: 1, deletions: 0 },
     ],
     diff: SAMPLE_DIFF,
+    highlighter: hl,
   })
   expect(html).toContain('data-file-pane="src/a.ts"')
   expect(html).toContain('data-file-pane="src/b.ts"')
@@ -81,7 +89,7 @@ test('renders one file pane per PrFileEntry, hidden by default', () => {
 })
 
 test('renders an Overview pane mapped to data-file-pane=""', () => {
-  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {} })
+  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {}, highlighter: hl })
   expect(html).toContain('data-file-pane=""')
 })
 
@@ -91,6 +99,7 @@ test('renders a per-file toolbar with breadcrumb, deltas, finding-nav and diff-m
     postStatus: {},
     files: [{ path: 'src/a.ts', additions: 3, deletions: 1 }],
     diff: SAMPLE_DIFF,
+    highlighter: hl,
   })
   expect(html).toContain('+3')
   expect(html).toContain('-1')
@@ -107,6 +116,7 @@ test('renders both unified and split diff containers per file', () => {
     postStatus: {},
     files: [{ path: 'src/a.ts', additions: 3, deletions: 1 }],
     diff: SAMPLE_DIFF,
+    highlighter: hl,
   })
   expect(html).toContain('data-diff-mode="unified"')
   expect(html).toContain('data-diff-mode="split"')
@@ -118,18 +128,19 @@ test('places an inline annotation at the affected diff line', () => {
     postStatus: {},
     files: [{ path: 'src/a.ts', additions: 3, deletions: 1 }],
     diff: SAMPLE_DIFF,
+    highlighter: hl,
   })
   expect(html).toContain('data-finding-id="a"')
   expect(html).toContain('class="annot')
 })
 
 test('mounts the All Issues pane', () => {
-  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {} })
+  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {}, highlighter: hl })
   expect(html).toContain('data-role="issues-list"')
 })
 
 test('mounts the action bar at the page bottom', () => {
-  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {} })
+  const html = renderFindingsHtml({ findings: SAMPLE_FINDINGS, postStatus: {}, highlighter: hl })
   expect(html).toContain('data-role="action-bar"')
   expect(html).toContain('Post Recommended')
 })
@@ -138,6 +149,7 @@ test('marks posted findings with data-posted="true"', () => {
   const html = renderFindingsHtml({
     findings: SAMPLE_FINDINGS,
     postStatus: { a: 'posted' },
+    highlighter: hl,
   })
   expect(html).toContain('data-posted="true"')
 })
@@ -152,8 +164,10 @@ test('renders the suggestion code block in the annotation', () => {
       }),
     ],
     postStatus: {},
+    highlighter: hl,
   })
-  expect(html).toContain('if (!y) return')
+  // Shiki tokenizes identifiers into separate spans; check for a known token
+  expect(html).toContain('return')
   expect(html).toContain('Suggested change')
 })
 
@@ -168,6 +182,7 @@ test('parses labelled paragraphs into section headers', () => {
       }),
     ],
     postStatus: {},
+    highlighter: hl,
   })
   expect(html).toContain('Observation')
   expect(html).toContain('Why it matters')
@@ -179,6 +194,7 @@ test('renders pr meta when supplied', () => {
     findings: SAMPLE_FINDINGS,
     postStatus: {},
     pr: { number: 42, branch: 'feat/x', headSha: 'deadbeefdeadbeef0000111122223333' },
+    highlighter: hl,
   })
   expect(html).toContain('PR #42')
   expect(html).toContain('feat/x')

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

@@ -1,4 +1,6 @@
-import { describe, expect, test } from 'bun:test'
+import { beforeAll, describe, expect, test } from 'bun:test'
+import type { Highlighter } from 'shiki'
+import { getHighlighter } from '../highlight.ts'
 import { renderIssuesList } from '../render-issues-list.ts'
 import type { ReviewFinding } from '../types.ts'
 
@@ -35,31 +37,61 @@ const findings: ReviewFinding[] = [
   },
 ] as ReviewFinding[]
 
+let hl: Highlighter
+beforeAll(async () => {
+  hl = await getHighlighter()
+})
+
 describe('renderIssuesList', () => {
   test('renders an issue-card per finding', () => {
-    const html = renderIssuesList({ findings, postStatus: {}, selectedIds: new Set() })
+    const html = renderIssuesList({
+      findings,
+      postStatus: {},
+      selectedIds: new Set(),
+      highlighter: hl,
+    })
     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() })
+    const html = renderIssuesList({
+      findings,
+      postStatus: {},
+      selectedIds: new Set(),
+      highlighter: hl,
+    })
     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() })
+    const html = renderIssuesList({
+      findings,
+      postStatus: {},
+      selectedIds: new Set(),
+      highlighter: hl,
+    })
     expect(html).toContain('2 should review')
   })
 
   test('emits "Show N suggestions" toggle when suggestions present', () => {
-    const html = renderIssuesList({ findings, postStatus: {}, selectedIds: new Set() })
+    const html = renderIssuesList({
+      findings,
+      postStatus: {},
+      selectedIds: new Set(),
+      highlighter: hl,
+    })
     expect(html).toContain('Show 1 suggestion')
   })
 
   test('suggestion finding has data-suggestion="true"', () => {
-    const html = renderIssuesList({ findings, postStatus: {}, selectedIds: new Set() })
+    const html = renderIssuesList({
+      findings,
+      postStatus: {},
+      selectedIds: new Set(),
+      highlighter: hl,
+    })
     expect(html).toMatch(
       /data-finding-id="3"[^>]*data-suggestion="true"|data-suggestion="true"[^>]*data-finding-id="3"/,
     )

package/skills/magpie/scripts/__tests__/skill-lint.test.ts

@@ -52,7 +52,9 @@ test('styles.css declares a prefers-color-scheme:dark block that overrides core
 test('rendered HTML opts into light/dark with a color-scheme meta tag', async () => {
   const { renderFindingsHtml } = await import('../render-findings.ts')
   const { renderProgressHtml } = await import('../render-progress.ts')
-  const findings = renderFindingsHtml({ findings: [], postStatus: {} })
+  const { getHighlighter } = await import('../highlight.ts')
+  const highlighter = await getHighlighter()
+  const findings = renderFindingsHtml({ findings: [], postStatus: {}, highlighter })
   const progress = renderProgressHtml({
     prNumber: 1,
     headSha: 'deadbeef0011',

package/skills/magpie/scripts/__tests__/types.test.ts

@@ -1,6 +1,13 @@
 import { describe, expect, test } from 'bun:test'
 import type { FocusId, PrFileEntry, ReviewFinding } from '../types.ts'
-import { FOCUS_IDS, isSuggestion, parseFinding } from '../types.ts'
+import {
+  coerceRisk,
+  coerceSeverity,
+  FOCUS_IDS,
+  isSuggestion,
+  looksLikeProse,
+  parseFinding,
+} from '../types.ts'
 
 test('FOCUS_IDS contains the LLM focuses plus the deterministic tests domain', () => {
   expect(FOCUS_IDS).toEqual([
@@ -30,19 +37,151 @@ test('parseFinding accepts a minimal finding', () => {
   expect(parsed.domain).toBe('bugs')
 })
 
-test('parseFinding rejects an unknown severity', () => {
-  expect(() =>
-    parseFinding({
-      id: 'f1',
-      file: 'src/x.ts',
-      line: 10,
-      severity: 'panic',
-      risk: { impact: 'high', likelihood: 'possible', confidence: 'medium', action: 'should-fix' },
-      title: 't',
-      description: 'd',
-      domain: 'bugs',
-    }),
-  ).toThrow(/severity/)
+test('parseFinding coerces an unknown severity to medium', () => {
+  const parsed = parseFinding({
+    id: 'f1',
+    file: 'src/x.ts',
+    line: 10,
+    severity: 'panic',
+    risk: { impact: 'high', likelihood: 'possible', confidence: 'medium', action: 'should-fix' },
+    title: 't',
+    description: 'd',
+    domain: 'bugs',
+  })
+  expect(parsed.severity).toBe('medium')
+})
+
+test('parseFinding coerces sentence-form action to canonical enum', () => {
+  const parsed = parseFinding({
+    id: 'f1',
+    file: 'src/x.ts',
+    line: 10,
+    severity: 'high',
+    risk: {
+      impact: 'high',
+      likelihood: 'possible',
+      confidence: 'medium',
+      action: 'Should be fixed before merge',
+    },
+    title: 't',
+    description: 'd',
+    domain: 'bugs',
+  })
+  expect(parsed.risk.action).toBe('should-fix')
+})
+
+test('parseFinding coerces wrong-axis likelihood values', () => {
+  const parsed = parseFinding({
+    id: 'f1',
+    file: 'src/x.ts',
+    line: 10,
+    severity: 'high',
+    risk: { impact: 'high', likelihood: 'high', confidence: 'medium', action: 'should-fix' },
+    title: 't',
+    description: 'd',
+    domain: 'bugs',
+  })
+  expect(parsed.risk.likelihood).toBe('likely')
+})
+
+describe('coerceSeverity', () => {
+  test('passes through canonical values', () => {
+    for (const v of ['blocker', 'high', 'medium', 'low'] as const) {
+      expect(coerceSeverity(v)).toBe(v)
+    }
+  })
+  test('maps synonyms', () => {
+    expect(coerceSeverity('critical')).toBe('blocker')
+    expect(coerceSeverity('major')).toBe('high')
+    expect(coerceSeverity('moderate')).toBe('medium')
+    expect(coerceSeverity('minor')).toBe('low')
+  })
+  test('handles casing and whitespace', () => {
+    expect(coerceSeverity('  HIGH ')).toBe('high')
+  })
+  test('falls back to medium for garbage', () => {
+    expect(coerceSeverity('panic')).toBe('medium')
+    expect(coerceSeverity('')).toBe('medium')
+    expect(coerceSeverity(null)).toBe('medium')
+    expect(coerceSeverity(undefined)).toBe('medium')
+    expect(coerceSeverity(42)).toBe('medium')
+  })
+})
+
+describe('coerceRisk', () => {
+  test('passes through canonical risk object', () => {
+    expect(
+      coerceRisk({
+        impact: 'critical',
+        likelihood: 'likely',
+        confidence: 'high',
+        action: 'must-fix',
+      }),
+    ).toEqual({
+      impact: 'critical',
+      likelihood: 'likely',
+      confidence: 'high',
+      action: 'must-fix',
+    })
+  })
+  test('maps action synonyms and underscore/space variants', () => {
+    expect(coerceRisk({ action: 'must_fix' }).action).toBe('must-fix')
+    expect(coerceRisk({ action: 'should fix' }).action).toBe('should-fix')
+    expect(coerceRisk({ action: 'blocker' }).action).toBe('must-fix')
+    expect(coerceRisk({ action: 'nit' }).action).toBe('optional')
+    expect(coerceRisk({ action: 'recommend' }).action).toBe('should-fix')
+  })
+  test('extracts action from full sentences', () => {
+    expect(coerceRisk({ action: 'This must be fixed immediately.' }).action).toBe('must-fix')
+    expect(coerceRisk({ action: 'Should fix before merging the PR' }).action).toBe('should-fix')
+    expect(coerceRisk({ action: 'Consider refactoring this' }).action).toBe('consider')
+    expect(coerceRisk({ action: 'Nice to have' }).action).toBe('optional')
+  })
+  test('maps likelihood wrong-axis values', () => {
+    expect(coerceRisk({ likelihood: 'high' }).likelihood).toBe('likely')
+    expect(coerceRisk({ likelihood: 'medium' }).likelihood).toBe('possible')
+    expect(coerceRisk({ likelihood: 'low' }).likelihood).toBe('edge-case')
+    expect(coerceRisk({ likelihood: 'edge case' }).likelihood).toBe('edge-case')
+    expect(coerceRisk({ likelihood: 'n/a' }).likelihood).toBe('unknown')
+  })
+  test('maps impact synonyms', () => {
+    expect(coerceRisk({ impact: 'blocker' }).impact).toBe('critical')
+    expect(coerceRisk({ impact: 'major' }).impact).toBe('high')
+    expect(coerceRisk({ impact: 'moderate' }).impact).toBe('medium')
+    expect(coerceRisk({ impact: 'minor' }).impact).toBe('low')
+  })
+  test('maps confidence synonyms', () => {
+    expect(coerceRisk({ confidence: 'certain' }).confidence).toBe('high')
+    expect(coerceRisk({ confidence: 'moderate' }).confidence).toBe('medium')
+    expect(coerceRisk({ confidence: 'speculative' }).confidence).toBe('low')
+  })
+  test('falls back to safe defaults for garbage / missing', () => {
+    expect(coerceRisk({})).toEqual({
+      impact: 'medium',
+      likelihood: 'unknown',
+      confidence: 'medium',
+      action: 'consider',
+    })
+    expect(coerceRisk(null)).toEqual({
+      impact: 'medium',
+      likelihood: 'unknown',
+      confidence: 'medium',
+      action: 'consider',
+    })
+    expect(
+      coerceRisk({
+        impact: 'whatever',
+        likelihood: 42,
+        confidence: '',
+        action: 'do the thing',
+      }),
+    ).toEqual({
+      impact: 'medium',
+      likelihood: 'unknown',
+      confidence: 'medium',
+      action: 'consider',
+    })
+  })
 })
 
 test('parseFinding accepts null line', () => {
@@ -68,6 +207,80 @@ describe('PrFileEntry', () => {
   })
 })
 
+describe('looksLikeProse', () => {
+  test('returns true for multi-sentence prose with backticks', () => {
+    const body =
+      'Strip the delimiter from user-controlled fields. For example, inside `getX` apply a sanitiser that neutralises the tokens.'
+    expect(looksLikeProse(body)).toBe(true)
+  })
+  test('returns true for single-line sentence-shaped explanation', () => {
+    const body =
+      'Reject the literal delimiter token in any field that flows into the draft before invoking Bedrock.'
+    expect(looksLikeProse(body)).toBe(true)
+  })
+  test('returns false for multi-line replacement code', () => {
+    const body =
+      'if (input.includes("<<<END>>>")) {\n  throw new Error("delimiter token not allowed")\n}'
+    expect(looksLikeProse(body)).toBe(false)
+  })
+  test('returns false for short single-line code', () => {
+    expect(looksLikeProse('return null;')).toBe(false)
+    expect(looksLikeProse('const x = foo(bar);')).toBe(false)
+    expect(looksLikeProse('user?.id ?? "";')).toBe(false)
+  })
+  test('returns false for one-line code that happens to end with a period', () => {
+    // No prose connectives, just a method chain.
+    expect(looksLikeProse('foo.bar.baz();')).toBe(false)
+  })
+  test('returns false for empty body', () => {
+    expect(looksLikeProse('')).toBe(false)
+    expect(looksLikeProse('   ')).toBe(false)
+  })
+  test('returns false for fenced code block', () => {
+    const body = '```ts\nconst guarded = sanitize(input)\nreturn guarded\n```'
+    expect(looksLikeProse(body)).toBe(false)
+  })
+})
+
+describe('parseFinding suggestion validator', () => {
+  const base = {
+    id: 'f1',
+    file: 'src/x.ts',
+    line: 10,
+    severity: 'medium',
+    risk: { impact: 'medium', likelihood: 'possible', confidence: 'medium', action: 'should-fix' },
+    title: 't',
+    description: 'd',
+    domain: 'security',
+  }
+  test('drops suggestion when body is prose', () => {
+    const parsed = parseFinding({
+      ...base,
+      suggestion: {
+        body: 'Strip the delimiter tokens before they enter the draft. Add a regression test to confirm.',
+        startLine: 10,
+        endLine: 12,
+      },
+    })
+    expect(parsed.suggestion).toBeUndefined()
+  })
+  test('keeps suggestion when body is real replacement code', () => {
+    const parsed = parseFinding({
+      ...base,
+      suggestion: {
+        body: 'const guarded = sanitize(input)\nreturn guarded',
+        startLine: 10,
+        endLine: 11,
+      },
+    })
+    expect(parsed.suggestion).toEqual({
+      body: 'const guarded = sanitize(input)\nreturn guarded',
+      startLine: 10,
+      endLine: 11,
+    })
+  })
+})
+
 describe('isSuggestion', () => {
   const base = {
     id: '1',

package/skills/magpie/scripts/highlight.ts

@@ -0,0 +1,113 @@
+import { createHighlighter, type Highlighter } from 'shiki'
+
+const LANG_BY_EXT: Record<string, string> = {
+  ts: 'typescript',
+  mts: 'typescript',
+  cts: 'typescript',
+  tsx: 'tsx',
+  js: 'javascript',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  jsx: 'jsx',
+  py: 'python',
+  go: 'go',
+  rs: 'rust',
+  java: 'java',
+  rb: 'ruby',
+  sh: 'bash',
+  bash: 'bash',
+  zsh: 'bash',
+  json: 'json',
+  jsonc: 'json',
+  yml: 'yaml',
+  yaml: 'yaml',
+  md: 'markdown',
+  markdown: 'markdown',
+  html: 'html',
+  htm: 'html',
+  css: 'css',
+  sql: 'sql',
+}
+
+const REGISTERED_LANGS: string[] = [
+  'typescript',
+  'tsx',
+  'javascript',
+  'jsx',
+  'python',
+  'go',
+  'rust',
+  'java',
+  'ruby',
+  'bash',
+  'json',
+  'yaml',
+  'markdown',
+  'html',
+  'css',
+  'sql',
+]
+
+const THEMES = { light: 'vitesse-light', dark: 'vitesse-dark' } as const
+
+export function languageFromPath(path: string): string {
+  if (!path) return 'plaintext'
+  const dot = path.lastIndexOf('.')
+  if (dot < 0 || dot === path.length - 1) return 'plaintext'
+  const ext = path.slice(dot + 1).toLowerCase()
+  return LANG_BY_EXT[ext] ?? 'plaintext'
+}
+
+let cached: Promise<Highlighter> | null = null
+
+export function getHighlighter(): Promise<Highlighter> {
+  if (!cached) {
+    cached = createHighlighter({
+      themes: [THEMES.light, THEMES.dark],
+      langs: REGISTERED_LANGS,
+    })
+  }
+  return cached
+}
+
+export function _resetHighlighterForTests(): void {
+  cached = null
+}
+
+export function highlightCodeBlock(highlighter: Highlighter, code: string, lang: string): string {
+  const safeLang = REGISTERED_LANGS.includes(lang) ? lang : 'plaintext'
+  return highlighter.codeToHtml(code, {
+    lang: safeLang,
+    themes: THEMES,
+    defaultColor: 'light',
+  })
+}
+
+export function highlightDiffSide(highlighter: Highlighter, code: string, lang: string): string[] {
+  const safeLang = REGISTERED_LANGS.includes(lang) ? lang : 'plaintext'
+  const html = highlighter.codeToHtml(code, {
+    lang: safeLang,
+    themes: THEMES,
+    defaultColor: 'light',
+  })
+  return extractShikiLines(html)
+}
+
+// Shiki wraps each line in <span class="line">...</span>. Each such outer span
+// sits on one text line in the rendered HTML, but the first and last lines also
+// carry the <pre>/<code> wrappers. We use a per-text-line greedy match (no `s`
+// flag, so `.` stops at newlines) which correctly captures all inner spans while
+// treating the last </span> on that text line as the outer closer.
+// Empty input produces a single empty-span line which we normalise to [].
+export function extractShikiLines(shikiHtml: string): string[] {
+  const results: string[] = []
+  for (const textLine of shikiHtml.split('\n')) {
+    const match = textLine.match(/<span class="line"[^>]*>(.*)<\/span>/)
+    if (match) {
+      results.push(match[1] ?? '')
+    }
+  }
+  // Shiki always emits at least one line span even for empty input; collapse that.
+  if (results.length === 1 && results[0] === '') return []
+  return results
+}

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

@@ -1,4 +1,6 @@
+import type { Highlighter } from 'shiki'
 import { parseFindingDescription } from './finding-description.ts'
+import { highlightCodeBlock, languageFromPath } from './highlight.ts'
 import { isSuggestion, type ReviewFinding } from './types.ts'
 
 const DOMAIN_LABELS: Record<string, string> = {
@@ -35,24 +37,44 @@ export type RenderAnnotationOptions = {
   asCard: boolean
   /** When posting previously failed, surface the failure on the card. */
   failed?: { message: string }
+  highlighter: Highlighter
+}
+
+function renderInline(body: string): string {
+  // Backtick-delimited spans become inline <code> elements; everything else
+  // remains escaped text. Splitting on `([^`]+)` puts plain text at even
+  // indices and backtick contents at odd indices.
+  const parts = body.split(/`([^`]+)`/g)
+  return parts
+    .map((part, i) => {
+      const escaped = esc(part)
+      return i % 2 === 1 ? `<code class="inline-code">${escaped}</code>` : escaped
+    })
+    .join('')
 }
 
 function renderSections(description: string): string {
   const sections = parseFindingDescription(description)
   if (sections.length === 0) {
-    return `<section class="section"><div class="section-label">Observation</div><div class="section-body">${esc(description.trim())}</div></section>`
+    return `<section class="section"><div class="section-label">Observation</div><div class="section-body">${renderInline(description.trim())}</div></section>`
   }
   return sections
     .map(
       (s) =>
-        `<section class="section"><div class="section-label">${esc(s.label)}</div><div class="section-body">${esc(s.body)}</div></section>`,
+        `<section class="section"><div class="section-label">${esc(s.label)}</div><div class="section-body">${renderInline(s.body)}</div></section>`,
     )
     .join('')
 }
 
-function renderSuggestion(f: ReviewFinding): string {
+function renderSuggestion(f: ReviewFinding, highlighter: Highlighter): string {
   if (!f.suggestion) return ''
-  return `<section class="section"><div class="section-label">Suggested change</div><pre class="suggestion">${esc(f.suggestion.body)}</pre></section>`
+  const lang = languageFromPath(f.file)
+  const shiki = highlightCodeBlock(highlighter, f.suggestion.body, lang)
+  // Shiki emits `<pre class="shiki ..."><code>...</code></pre>`. Layer our
+  // existing `.suggestion` class on top so the border/padding/font-size
+  // styling continues to apply.
+  const withClass = shiki.replace('class="shiki', 'class="suggestion shiki')
+  return `<section class="section"><div class="section-label">Suggested change</div>${withClass}</section>`
 }
 
 function renderRisk(f: ReviewFinding): string {
@@ -87,7 +109,7 @@ export function renderAnnotation(f: ReviewFinding, opts: RenderAnnotationOptions
         ${statusChip}
       </div>
       ${renderSections(f.description)}
-      ${renderSuggestion(f)}
+      ${renderSuggestion(f, opts.highlighter)}
       ${renderRisk(f)}
     </div>
     <button type="button" class="send-btn" data-action="post-one" data-finding-id="${esc(f.id)}" title="Post this finding" aria-label="post">▸</button>