More website tweaks (#977)

* Some layout tweaks

* SSR resource listing pages

Render resource listing pages in Astro for first paint and hydrate client filtering/search behavior on top.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Fixing font path

* removing feature plugin reference as we don't track that anymore

* button alignment

* rendering markdown

* Improve skills modal file browsing

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Improving the layout of the search/filter section

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

website/src/scripts/pages/agents.ts

@@ -3,11 +3,11 @@
  */
 import { createChoices, getChoicesValues, type Choices } from '../choices';
 import { FuzzySearch, type SearchItem } from '../search';
-import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers, getActionButtonsHtml, setupActionHandlers, getLastUpdatedHtml } from '../utils';
+import { fetchData, debounce, setupDropdownCloseHandlers, setupActionHandlers } from '../utils';
 import { setupModal, openFileModal } from '../modal';
+import { renderAgentsHtml, sortAgents, type AgentSortOption, type RenderableAgent } from './agents-render';
 
-interface Agent extends SearchItem {
-  path: string;
+interface Agent extends SearchItem, RenderableAgent {
   model?: string;
   tools?: string[];
   hasHandoffs?: boolean;
@@ -22,14 +22,12 @@ interface AgentsData {
   };
 }
 
-type SortOption = 'title' | 'lastUpdated';
-
-const resourceType = 'agent';
 let allItems: Agent[] = [];
 let search = new FuzzySearch<Agent>();
 let modelSelect: Choices;
 let toolSelect: Choices;
-let currentSort: SortOption = 'title';
+let currentSort: AgentSortOption = 'title';
+let resourceListHandlersReady = false;
 
 let currentFilters = {
   models: [] as string[],
@@ -38,16 +36,7 @@ let currentFilters = {
 };
 
 function sortItems(items: Agent[]): Agent[] {
-  return [...items].sort((a, b) => {
-    if (currentSort === 'lastUpdated') {
-      // Sort by last updated (newest first), with null/undefined at end
-      const dateA = a.lastUpdated ? new Date(a.lastUpdated).getTime() : 0;
-      const dateB = b.lastUpdated ? new Date(b.lastUpdated).getTime() : 0;
-      return dateB - dateA;
-    }
-    // Default: sort by title
-    return a.title.localeCompare(b.title);
-  });
+  return sortAgents(items, currentSort);
 }
 
 function applyFiltersAndRender(): void {
@@ -97,48 +86,31 @@ function renderItems(items: Agent[], query = ''): void {
   const list = document.getElementById('resource-list');
   if (!list) return;
 
-  if (items.length === 0) {
-    list.innerHTML = `
-      <div class="empty-state">
-        <h3>No agents found</h3>
-        <p>Try a different search term or adjust filters</p>
-      </div>
-    `;
-    return;
-  }
-
-  list.innerHTML = items.map(item => `
-    <div class="resource-item" data-path="${escapeHtml(item.path)}">
-      <div class="resource-info">
-        <div class="resource-title">${query ? search.highlight(item.title, query) : escapeHtml(item.title)}</div>
-        <div class="resource-description">${escapeHtml(item.description || 'No description')}</div>
-        <div class="resource-meta">
-          ${item.model ? `<span class="resource-tag tag-model">${escapeHtml(item.model)}</span>` : ''}
-          ${item.tools?.slice(0, 3).map(t => `<span class="resource-tag">${escapeHtml(t)}</span>`).join('') || ''}
-          ${item.tools && item.tools.length > 3 ? `<span class="resource-tag">+${item.tools.length - 3} more</span>` : ''}
-          ${item.hasHandoffs ? `<span class="resource-tag tag-handoffs">handoffs</span>` : ''}
-          ${getLastUpdatedHtml(item.lastUpdated)}
-        </div>
-      </div>
-      <div class="resource-actions">
-        ${getInstallDropdownHtml(resourceType, item.path, true)}
-        ${getActionButtonsHtml(item.path, true)}
-        <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()" title="View on GitHub">
-          GitHub
-        </a>
-      </div>
-    </div>
-  `).join('');
-
-  // Add click handlers
-  list.querySelectorAll('.resource-item').forEach(el => {
-    el.addEventListener('click', () => {
-      const path = (el as HTMLElement).dataset.path;
-      if (path) openFileModal(path, resourceType);
-    });
+  list.innerHTML = renderAgentsHtml(items, {
+    query,
+    highlightTitle: (title, highlightQuery) => search.highlight(title, highlightQuery),
   });
 }
 
+function setupResourceListHandlers(list: HTMLElement | null): void {
+  if (!list || resourceListHandlersReady) return;
+
+  list.addEventListener('click', (event) => {
+    const target = event.target as HTMLElement;
+    if (target.closest('.resource-actions')) {
+      return;
+    }
+
+    const item = target.closest('.resource-item') as HTMLElement | null;
+    const path = item?.dataset.path;
+    if (path) {
+      openFileModal(path, 'agent');
+    }
+  });
+
+  resourceListHandlersReady = true;
+}
+
 export async function initAgentsPage(): Promise<void> {
   const list = document.getElementById('resource-list');
   const searchInput = document.getElementById('search-input') as HTMLInputElement;
@@ -146,6 +118,8 @@ export async function initAgentsPage(): Promise<void> {
   const clearFiltersBtn = document.getElementById('clear-filters');
   const sortSelect = document.getElementById('sort-select') as HTMLSelectElement;
 
+  setupResourceListHandlers(list as HTMLElement | null);
+
   const data = await fetchData<AgentsData>('agents.json');
   if (!data || !data.items) {
     if (list) list.innerHTML = '<div class="empty-state"><h3>Failed to load data</h3></div>';
@@ -173,11 +147,14 @@ export async function initAgentsPage(): Promise<void> {
 
   // Initialize sort select
   sortSelect?.addEventListener('change', () => {
-    currentSort = sortSelect.value as SortOption;
+    currentSort = sortSelect.value as AgentSortOption;
     applyFiltersAndRender();
   });
 
-  applyFiltersAndRender();
+  const countEl = document.getElementById('results-count');
+  if (countEl) {
+    countEl.textContent = `${allItems.length} of ${allItems.length} agents`;
+  }
 
   searchInput?.addEventListener('input', debounce(() => applyFiltersAndRender(), 200));