From 1887d9ba5695aeee6bbd0c9dff860caba490595c Mon Sep 17 00:00:00 2001
From: Aaron Powell <me@aaron-powell.com>
Date: Wed, 28 Jan 2026 19:51:35 +1100
Subject: [PATCH] feat: add VS Code install buttons to list views

- Add VS Code and VS Code Insiders install buttons to agent, prompt, and instruction list items
- Use smaller button style for list view
- Include VS Code icon for visual identification
---
 website/public/data/manifest.json         |  2 +-
 website/src/scripts/pages/agents.ts       | 13 ++++++++++---
 website/src/scripts/pages/instructions.ts | 13 +++++++++++--
 website/src/scripts/pages/prompts.ts      | 13 +++++++++++--
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/website/public/data/manifest.json b/website/public/data/manifest.json
index 6ba6bacd..1d190fe2 100644
--- a/website/public/data/manifest.json
+++ b/website/public/data/manifest.json
@@ -1,5 +1,5 @@
 {
-  "generated": "2026-01-28T08:38:48.985Z",
+  "generated": "2026-01-28T08:51:25.860Z",
   "counts": {
     "agents": 140,
     "prompts": 134,
diff --git a/website/src/scripts/pages/agents.ts b/website/src/scripts/pages/agents.ts
index 9423a519..2be8b79e 100644
--- a/website/src/scripts/pages/agents.ts
+++ b/website/src/scripts/pages/agents.ts
@@ -3,7 +3,7 @@
  */
 import { createChoices, getChoicesValues, type Choices } from '../choices';
 import { FuzzySearch } from '../search';
-import { fetchData, debounce, escapeHtml, getGitHubUrl } from '../utils';
+import { fetchData, debounce, escapeHtml, getGitHubUrl, getVSCodeInstallUrl } from '../utils';
 import { setupModal, openFileModal } from '../modal';
 
 interface Agent {
@@ -102,8 +102,15 @@ function renderItems(items: Agent[], query = ''): void {
         </div>
       </div>
       <div class="resource-actions">
-        <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary" target="_blank" onclick="event.stopPropagation()">
-          View on GitHub
+        <a href="${getVSCodeInstallUrl(resourceType, item.path, false)}" class="btn btn-primary btn-small" target="_blank" onclick="event.stopPropagation()" title="Install to VS Code">
+          <svg viewBox="0 0 100 100" width="14" height="14" fill="currentColor"><path d="M95.436 26.986L75.282 15.768a6.04 6.04 0 0 0-6.895.876L28.78 51.927 11.912 39.151a4.03 4.03 0 0 0-5.154.387l-5.36 4.878a4.03 4.03 0 0 0-.003 5.947l14.646 13.396-14.646 13.396a4.03 4.03 0 0 0 .003 5.947l5.36 4.878a4.03 4.03 0 0 0 5.154.387L28.78 74.59l39.607 35.283a6.04 6.04 0 0 0 6.895.876l20.154-11.218a6.04 6.04 0 0 0 3.127-5.288V32.274a6.04 6.04 0 0 0-3.127-5.288zM75.015 73.428L46.339 51.927l28.676-21.5z" transform="scale(0.16)"/></svg>
+          VS Code
+        </a>
+        <a href="${getVSCodeInstallUrl(resourceType, item.path, true)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()" title="Install to VS Code Insiders">
+          Insiders
+        </a>
+        <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()">
+          GitHub
         </a>
       </div>
     </div>
diff --git a/website/src/scripts/pages/instructions.ts b/website/src/scripts/pages/instructions.ts
index cd2d864b..50e4df91 100644
--- a/website/src/scripts/pages/instructions.ts
+++ b/website/src/scripts/pages/instructions.ts
@@ -3,7 +3,7 @@
  */
 import { createChoices, getChoicesValues, type Choices } from '../choices';
 import { FuzzySearch } from '../search';
-import { fetchData, debounce, escapeHtml, getGitHubUrl } from '../utils';
+import { fetchData, debounce, escapeHtml, getGitHubUrl, getVSCodeInstallUrl } from '../utils';
 import { setupModal, openFileModal } from '../modal';
 
 interface Instruction {
@@ -72,7 +72,16 @@ function renderItems(items: Instruction[], query = ''): void {
         </div>
       </div>
       <div class="resource-actions">
-        <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary" target="_blank" onclick="event.stopPropagation()">View on GitHub</a>
+        <a href="${getVSCodeInstallUrl('instructions', item.path, false)}" class="btn btn-primary btn-small" target="_blank" onclick="event.stopPropagation()" title="Install to VS Code">
+          <svg viewBox="0 0 100 100" width="14" height="14" fill="currentColor"><path d="M95.436 26.986L75.282 15.768a6.04 6.04 0 0 0-6.895.876L28.78 51.927 11.912 39.151a4.03 4.03 0 0 0-5.154.387l-5.36 4.878a4.03 4.03 0 0 0-.003 5.947l14.646 13.396-14.646 13.396a4.03 4.03 0 0 0 .003 5.947l5.36 4.878a4.03 4.03 0 0 0 5.154.387L28.78 74.59l39.607 35.283a6.04 6.04 0 0 0 6.895.876l20.154-11.218a6.04 6.04 0 0 0 3.127-5.288V32.274a6.04 6.04 0 0 0-3.127-5.288zM75.015 73.428L46.339 51.927l28.676-21.5z" transform="scale(0.16)"/></svg>
+          VS Code
+        </a>
+        <a href="${getVSCodeInstallUrl('instructions', item.path, true)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()" title="Install to VS Code Insiders">
+          Insiders
+        </a>
+        <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()">
+          GitHub
+        </a>
       </div>
     </div>
   `).join('');
diff --git a/website/src/scripts/pages/prompts.ts b/website/src/scripts/pages/prompts.ts
index 2cef2b6d..7e6a0e4e 100644
--- a/website/src/scripts/pages/prompts.ts
+++ b/website/src/scripts/pages/prompts.ts
@@ -3,7 +3,7 @@
  */
 import { createChoices, getChoicesValues, type Choices } from '../choices';
 import { FuzzySearch } from '../search';
-import { fetchData, debounce, escapeHtml, getGitHubUrl } from '../utils';
+import { fetchData, debounce, escapeHtml, getGitHubUrl, getVSCodeInstallUrl } from '../utils';
 import { setupModal, openFileModal } from '../modal';
 
 interface Prompt {
@@ -67,7 +67,16 @@ function renderItems(items: Prompt[], query = ''): void {
         </div>
       </div>
       <div class="resource-actions">
-        <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary" target="_blank" onclick="event.stopPropagation()">View on GitHub</a>
+        <a href="${getVSCodeInstallUrl(resourceType, item.path, false)}" class="btn btn-primary btn-small" target="_blank" onclick="event.stopPropagation()" title="Install to VS Code">
+          <svg viewBox="0 0 100 100" width="14" height="14" fill="currentColor"><path d="M95.436 26.986L75.282 15.768a6.04 6.04 0 0 0-6.895.876L28.78 51.927 11.912 39.151a4.03 4.03 0 0 0-5.154.387l-5.36 4.878a4.03 4.03 0 0 0-.003 5.947l14.646 13.396-14.646 13.396a4.03 4.03 0 0 0 .003 5.947l5.36 4.878a4.03 4.03 0 0 0 5.154.387L28.78 74.59l39.607 35.283a6.04 6.04 0 0 0 6.895.876l20.154-11.218a6.04 6.04 0 0 0 3.127-5.288V32.274a6.04 6.04 0 0 0-3.127-5.288zM75.015 73.428L46.339 51.927l28.676-21.5z" transform="scale(0.16)"/></svg>
+          VS Code
+        </a>
+        <a href="${getVSCodeInstallUrl(resourceType, item.path, true)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()" title="Install to VS Code Insiders">
+          Insiders
+        </a>
+        <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()">
+          GitHub
+        </a>
       </div>
     </div>
   `).join('');