feat: implement split button dropdown for install options

- Replace separate VS Code/Insiders buttons with single Install dropdown
- Primary 'Install' button opens in VS Code, dropdown chevron reveals options
- Dropdown shows 'VS Code' and 'VS Code Insiders' choices
- Add CSS for split button styling with glassmorphism dropdown
- Apply to modal and all list views (agents, prompts, instructions)

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, getVSCodeInstallUrl } from '../utils';
+import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers } from '../utils';
 import { setupModal, openFileModal } from '../modal';
 
 interface Agent {
@@ -102,13 +102,7 @@ function renderItems(items: Agent[], query = ''): void {
         </div>
       </div>
       <div class="resource-actions">
-        <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>
+        ${getInstallDropdownHtml(resourceType, item.path, true)}
         <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()">
           GitHub
         </a>
@@ -175,6 +169,7 @@ export async function initAgentsPage(): Promise<void> {
   });
 
   setupModal();
+  setupDropdownCloseHandlers();
 }
 
 // Auto-initialize when DOM is ready

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, getVSCodeInstallUrl } from '../utils';
+import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers } from '../utils';
 import { setupModal, openFileModal } from '../modal';
 
 interface Instruction {
@@ -72,13 +72,7 @@ function renderItems(items: Instruction[], query = ''): void {
         </div>
       </div>
       <div class="resource-actions">
-        <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>
+        ${getInstallDropdownHtml('instructions', item.path, true)}
         <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()">
           GitHub
         </a>
@@ -127,6 +121,7 @@ export async function initInstructionsPage(): Promise<void> {
   });
   
   setupModal();
+  setupDropdownCloseHandlers();
 }
 
 // Auto-initialize when DOM is ready

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, getVSCodeInstallUrl } from '../utils';
+import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers } from '../utils';
 import { setupModal, openFileModal } from '../modal';
 
 interface Prompt {
@@ -67,13 +67,7 @@ function renderItems(items: Prompt[], query = ''): void {
         </div>
       </div>
       <div class="resource-actions">
-        <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>
+        ${getInstallDropdownHtml(resourceType, item.path, true)}
         <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()">
           GitHub
         </a>
@@ -122,6 +116,7 @@ export async function initPromptsPage(): Promise<void> {
   });
   
   setupModal();
+  setupDropdownCloseHandlers();
 }
 
 // Auto-initialize when DOM is ready