feat: show collections as item list in modal instead of raw YAML

- Display collection name, description, and tags
- Show clickable list of items in the collection
- Each item shows icon, filename, usage hint, and type badge
- Clicking an item opens that file in the modal
- Hide copy/download buttons for collections (they don't apply)

website/public/data/manifest.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2026-01-28T23:33:55.118Z",
+  "generated": "2026-01-28T23:37:43.897Z",
   "counts": {
     "agents": 140,
     "prompts": 134,

website/public/styles/global.css

@@ -837,6 +837,104 @@ a:hover {
   min-height: 200px;
 }
 
+/* Collection Modal View */
+.collection-view {
+  padding: 24px;
+}
+
+.collection-description {
+  font-size: 15px;
+  color: var(--color-text);
+  margin-bottom: 16px;
+  line-height: 1.6;
+}
+
+.collection-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.collection-items-header {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 12px;
+  color: var(--color-text-muted);
+  font-size: 14px;
+}
+
+.collection-items-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.collection-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.collection-item:hover {
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-accent);
+}
+
+.collection-item-icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.collection-item-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.collection-item-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.collection-item-usage {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.collection-item-type {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  background: var(--color-bg-tertiary);
+  padding: 4px 8px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.collection-loading,
+.collection-error {
+  padding: 40px;
+  text-align: center;
+  color: var(--color-text-muted);
+}
+
+.collection-error {
+  color: var(--color-error);
+}
+
 /* Page Layouts */
 .page-header {
   padding: 56px 0 40px;

website/src/scripts/modal.ts

@@ -2,13 +2,35 @@
  * Modal functionality for file viewing
  */
 
-import { fetchFileContent, getVSCodeInstallUrl, copyToClipboard, showToast, downloadFile, shareFile, getResourceType } from './utils';
+import { fetchFileContent, fetchData, getVSCodeInstallUrl, copyToClipboard, showToast, downloadFile, shareFile, getResourceType, escapeHtml, getResourceIcon } from './utils';
 
 // Modal state
 let currentFilePath: string | null = null;
 let currentFileContent: string | null = null;
 let currentFileType: string | null = null;
 
+// Collection data cache
+interface CollectionItem {
+  path: string;
+  kind: string;
+  usage?: string | null;
+}
+
+interface Collection {
+  id: string;
+  name: string;
+  description?: string;
+  path: string;
+  items: CollectionItem[];
+  tags?: string[];
+}
+
+interface CollectionsData {
+  items: Collection[];
+}
+
+let collectionsCache: CollectionsData | null = null;
+
 /**
  * Setup modal functionality
  */
@@ -139,13 +161,16 @@ export function setupInstallDropdown(containerId: string): void {
 export async function openFileModal(filePath: string, type: string, updateUrl = true): Promise<void> {
   const modal = document.getElementById('file-modal');
   const title = document.getElementById('modal-title');
-  const contentEl = document.getElementById('modal-content')?.querySelector('code');
+  const modalContent = document.getElementById('modal-content');
+  const contentEl = modalContent?.querySelector('code');
   const installDropdown = document.getElementById('install-dropdown');
   const installBtnMain = document.getElementById('install-btn-main') as HTMLAnchorElement | null;
   const installVscode = document.getElementById('install-vscode') as HTMLAnchorElement | null;
   const installInsiders = document.getElementById('install-insiders') as HTMLAnchorElement | null;
+  const copyBtn = document.getElementById('copy-btn');
+  const downloadBtn = document.getElementById('download-btn');
 
-  if (!modal || !title || !contentEl) return;
+  if (!modal || !title || !modalContent) return;
 
   currentFilePath = filePath;
   currentFileType = type;
@@ -157,9 +182,29 @@ export async function openFileModal(filePath: string, type: string, updateUrl =
   
   // Show modal with loading state
   title.textContent = filePath.split('/').pop() || filePath;
-  contentEl.textContent = 'Loading...';
   modal.classList.remove('hidden');
 
+  // Handle collections differently - show as item list
+  if (type === 'collection') {
+    await openCollectionModal(filePath, title, modalContent, installDropdown, copyBtn, downloadBtn);
+    return;
+  }
+
+  // Regular file modal
+  if (contentEl) {
+    contentEl.textContent = 'Loading...';
+  }
+  
+  // Show copy/download buttons for regular files
+  if (copyBtn) copyBtn.style.display = 'inline-flex';
+  if (downloadBtn) downloadBtn.style.display = 'inline-flex';
+  
+  // Restore pre/code structure if it was replaced by collection view
+  if (!modalContent.querySelector('pre')) {
+    modalContent.innerHTML = '<pre id="modal-content"><code></code></pre>';
+  }
+  const codeEl = modalContent.querySelector('code');
+
   // Setup install dropdown
   const vscodeUrl = getVSCodeInstallUrl(type, filePath, false);
   const insidersUrl = getVSCodeInstallUrl(type, filePath, true);
@@ -178,13 +223,91 @@ export async function openFileModal(filePath: string, type: string, updateUrl =
   const fileContent = await fetchFileContent(filePath);
   currentFileContent = fileContent;
   
-  if (fileContent) {
-    contentEl.textContent = fileContent;
-  } else {
-    contentEl.textContent = 'Failed to load file content. Click the button below to view on GitHub.';
+  if (fileContent && codeEl) {
+    codeEl.textContent = fileContent;
+  } else if (codeEl) {
+    codeEl.textContent = 'Failed to load file content. Click the button below to view on GitHub.';
   }
 }
 
+/**
+ * Open collection modal with item list
+ */
+async function openCollectionModal(
+  filePath: string,
+  title: HTMLElement,
+  modalContent: HTMLElement,
+  installDropdown: HTMLElement | null,
+  copyBtn: HTMLElement | null,
+  downloadBtn: HTMLElement | null
+): Promise<void> {
+  // Hide install dropdown and copy/download for collections
+  if (installDropdown) installDropdown.style.display = 'none';
+  if (copyBtn) copyBtn.style.display = 'none';
+  if (downloadBtn) downloadBtn.style.display = 'none';
+
+  // Show loading
+  modalContent.innerHTML = '<div class="collection-loading">Loading collection...</div>';
+
+  // Load collections data if not cached
+  if (!collectionsCache) {
+    collectionsCache = await fetchData<CollectionsData>('collections.json');
+  }
+
+  if (!collectionsCache) {
+    modalContent.innerHTML = '<div class="collection-error">Failed to load collection data.</div>';
+    return;
+  }
+
+  // Find the collection
+  const collection = collectionsCache.items.find(c => c.path === filePath);
+  if (!collection) {
+    modalContent.innerHTML = '<div class="collection-error">Collection not found.</div>';
+    return;
+  }
+
+  // Update title
+  title.textContent = collection.name;
+
+  // Render collection view
+  modalContent.innerHTML = `
+    <div class="collection-view">
+      <div class="collection-description">${escapeHtml(collection.description || '')}</div>
+      ${collection.tags && collection.tags.length > 0 ? `
+        <div class="collection-tags">
+          ${collection.tags.map(t => `<span class="resource-tag">${escapeHtml(t)}</span>`).join('')}
+        </div>
+      ` : ''}
+      <div class="collection-items-header">
+        <strong>${collection.items.length} items in this collection</strong>
+      </div>
+      <div class="collection-items-list">
+        ${collection.items.map(item => `
+          <div class="collection-item" data-path="${escapeHtml(item.path)}" data-type="${escapeHtml(item.kind)}">
+            <span class="collection-item-icon">${getResourceIcon(item.kind)}</span>
+            <div class="collection-item-info">
+              <div class="collection-item-name">${escapeHtml(item.path.split('/').pop() || item.path)}</div>
+              ${item.usage ? `<div class="collection-item-usage">${escapeHtml(item.usage)}</div>` : ''}
+            </div>
+            <span class="collection-item-type">${escapeHtml(item.kind)}</span>
+          </div>
+        `).join('')}
+      </div>
+    </div>
+  `;
+
+  // Add click handlers to collection items
+  modalContent.querySelectorAll('.collection-item').forEach(el => {
+    el.addEventListener('click', () => {
+      const path = (el as HTMLElement).dataset.path;
+      const itemType = (el as HTMLElement).dataset.type;
+      if (path && itemType) {
+        openFileModal(path, itemType);
+      }
+    });
+  });
+}
+
 /**
  * Close modal
  * @param updateUrl - Whether to update the URL hash (default: true)