feat(plugin): directory listing icon and links

packages/mcp/src/__tests__/plugin-manifest.test.ts

@@ -263,3 +263,31 @@ describe('agent plugin text matches what the server does', () => {
     for (const name of names) expect(readme, `README should name ${name}`).toContain(`\`${name}\``)
   })
 })
+
+// Anthropic's directory reads these from .claude-plugin/plugin.json for the listing
+// (Claude Code itself ignores them); the Codex app shows the same artwork.
+describe('directory listing fields', () => {
+  const pngSize = (path: string) => {
+    const bytes = readFileSync(path)
+    expect(bytes.subarray(0, 8).toString('hex'), `${path} is not a PNG`).toBe('89504e470d0a1a0a')
+    return { width: bytes.readUInt32BE(16), height: bytes.readUInt32BE(20) }
+  }
+
+  it('points icon at a square PNG of at least 512px inside the plugin', () => {
+    expect(claudeManifest.icon).toBe('./assets/icon.png')
+    const { width, height } = pngSize(join(PLUGIN, claudeManifest.icon))
+    expect(width).toBe(height)
+    expect(width).toBeGreaterThanOrEqual(512)
+  })
+
+  it('links documentation and support over https', () => {
+    expect(claudeManifest.documentationUrl).toBe('https://github.com/refkitjs/refkit/tree/main/plugins/refkit#readme')
+    expect(claudeManifest.supportUrl).toBe('https://github.com/refkitjs/refkit/issues')
+  })
+
+  it('gives the Codex app the same artwork', () => {
+    expect(codexManifest.interface.logo).toBe(claudeManifest.icon)
+    expect(codexManifest.interface.composerIcon).toBe('./assets/icon.svg')
+    expect(existsSync(join(PLUGIN, codexManifest.interface.composerIcon))).toBe(true)
+  })
+})

plugins/refkit/.claude-plugin/plugin.json

@@ -17,5 +17,8 @@
     "creative-commons",
     "public-domain",
     "moodboard"
-  ]
+  ],
+  "icon": "./assets/icon.png",
+  "documentationUrl": "https://github.com/refkitjs/refkit/tree/main/plugins/refkit#readme",
+  "supportUrl": "https://github.com/refkitjs/refkit/issues"
 }

plugins/refkit/.codex-plugin/plugin.json

@@ -34,6 +34,8 @@
       "Can I use this Wikimedia Commons photo in an ad?"
     ],
     "websiteURL": "https://github.com/refkitjs/refkit",
-    "brandColor": "#0F172A"
+    "brandColor": "#0F172A",
+    "composerIcon": "./assets/icon.svg",
+    "logo": "./assets/icon.png"
   }
 }

scripts/build-plugin-icon.mts

@@ -0,0 +1,20 @@
+// Build plugins/refkit/assets/icon.png from icon.svg next to it. The PNG is what
+// Anthropic's plugin directory and the Codex app show; the SVG is the source and
+// the Codex composer icon. Re-run after editing the SVG:
+//
+//   npx tsx scripts/build-plugin-icon.mts
+import { readFileSync, writeFileSync } from 'node:fs'
+
+const assets = new URL('../plugins/refkit/assets/', import.meta.url)
+const svg = readFileSync(new URL('icon.svg', assets), 'utf8')
+
+// ---- rasterise to PNG (pure Rust, no browser) ----
+const { Resvg } = await import('@resvg/resvg-js')
+const png = new Resvg(svg, {
+  fitTo: { mode: 'width', value: 512 },
+  font: { loadSystemFonts: true, defaultFontFamily: 'Menlo' }, // the license-id background texture is monospace text
+})
+  .render()
+  .asPng()
+writeFileSync(new URL('icon.png', assets), png)
+console.log(`wrote plugins/refkit/assets/icon.png (${(png.length / 1024).toFixed(0)} KB, 512px)`)