@jacobbd/relay-ai 0.4.4 → 0.4.6

package/dist/ui/public/app.js

@@ -1,3 +1,9 @@
+import {
+  formatModelPrice,
+  getProviderModelPage,
+  PROVIDER_MODEL_PAGE_SIZE,
+} from './provider-model-browser.js';
+
 // ─── State ───────────────────────────────────────────────────────────────────
 
 const AGY_MAX = 6;
@@ -13,6 +19,9 @@ const state = {
   modelsLoaded: false,
   modelsError: null,
   providerFilter: '',
+  activeProviderId: null,
+  providerModelFilter: '',
+  providerModelPage: 1,
   modelFilter: '',
   modelFreeOnly: false,
   agyFilter: '',
@@ -436,7 +445,7 @@ function buildProviderCard(provider) {
   header.className = 'provider-card-header';
   header.setAttribute('role', 'button');
   header.setAttribute('tabindex', '0');
-  header.setAttribute('aria-expanded', 'false');
+  header.setAttribute('aria-label', `View models from ${displayName}`);
 
   const logoHtml = logo?.type === 'svg'
     ? logo.content
@@ -454,7 +463,9 @@ function buildProviderCard(provider) {
       <span class="status-chip ${provider.hasKey ? 'has-key' : provider.freeAccess ? 'free-access' : 'no-key'}">
         ${provider.hasKey ? 'Key stored' : provider.freeAccess ? 'Free models' : 'Not configured'}
       </span>
-      <svg class="provider-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+      <button class="provider-config-toggle" type="button" aria-label="Manage ${escapeHtml(displayName)} provider" aria-expanded="false" title="Manage provider">
+        <svg class="provider-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+      </button>
     </div>
   `;
 
@@ -469,18 +480,151 @@ function buildProviderCard(provider) {
 
   function toggle() {
     const isOpen = card.classList.toggle('open');
-    header.setAttribute('aria-expanded', String(isOpen));
+    configToggle.setAttribute('aria-expanded', String(isOpen));
     body.setAttribute('aria-hidden', String(!isOpen));
   }
 
-  header.addEventListener('click', toggle);
-  header.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } });
+  const configToggle = header.querySelector('.provider-config-toggle');
+  configToggle.addEventListener('click', event => { event.stopPropagation(); toggle(); });
+  header.addEventListener('click', () => openProviderModelBrowser(provider.id));
+  header.addEventListener('keydown', e => {
+    if (e.target === header && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      openProviderModelBrowser(provider.id);
+    }
+  });
 
   card.appendChild(header);
   card.appendChild(body);
   return card;
 }
 
+function providerIdFromHash() {
+  const prefix = '#provider/';
+  if (!window.location.hash.startsWith(prefix)) return null;
+  try {
+    return decodeURIComponent(window.location.hash.slice(prefix.length));
+  } catch {
+    return null;
+  }
+}
+
+function openProviderModelBrowser(providerId) {
+  if (state.activeProviderId !== providerId) {
+    state.providerModelFilter = '';
+    state.providerModelPage = 1;
+  }
+  window.location.hash = `provider/${encodeURIComponent(providerId)}`;
+}
+
+function syncProviderModelBrowserFromHash() {
+  const providerId = providerIdFromHash();
+  const content = document.getElementById('content');
+  state.activeProviderId = providerId;
+  content.classList.toggle('provider-browser-open', Boolean(providerId));
+  if (!providerId) return;
+  document.querySelectorAll('.nav-item').forEach(item => {
+    item.classList.toggle('active', item.dataset.section === 'providers');
+  });
+  content.scrollTop = 0;
+  renderProviderModelBrowser();
+}
+
+function renderProviderModelBrowser() {
+  const container = document.getElementById('provider-model-browser');
+  if (!state.activeProviderId) return;
+
+  const provider = state.providers.find(item => item.id === state.activeProviderId);
+  if (!provider) {
+    container.innerHTML = state.modelsLoaded
+      ? '<div class="provider-browser-empty">Provider not found. <a href="#providers">Return to providers</a></div>'
+      : '<div class="provider-browser-empty">Loading models…</div>';
+    return;
+  }
+
+  const result = getProviderModelPage(provider.models ?? [], state.providerModelFilter, state.providerModelPage);
+  state.providerModelPage = result.page;
+  const first = result.total === 0 ? 0 : (result.page - 1) * PROVIDER_MODEL_PAGE_SIZE + 1;
+  const last = Math.min(result.page * PROVIDER_MODEL_PAGE_SIZE, result.total);
+  const [c1, c2] = providerPalette(provider.id);
+  const displayName = getProviderName(provider.id);
+
+  container.innerHTML = `
+    <a class="provider-browser-back" href="#providers">← Providers &amp; Keys</a>
+    <div class="provider-browser-hero">
+      <div class="provider-icon" style="background:linear-gradient(135deg,${c1},${c2})">${providerInitial(displayName)}</div>
+      <div>
+        <div class="section-eyebrow">Provider catalog</div>
+        <h1 class="section-heading">${escapeHtml(displayName)} <span class="heading-accent">models</span></h1>
+        <p class="section-sub">${provider.models?.length ?? 0} models available · prices shown per 1M tokens</p>
+      </div>
+    </div>
+    <div class="provider-browser-tools">
+      <div class="search-field">
+        <svg class="search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+        <input class="search-input" id="provider-model-search" type="search" value="${escapeHtml(state.providerModelFilter)}" placeholder="Search ${escapeHtml(displayName)} models…" aria-label="Search ${escapeHtml(displayName)} models">
+      </div>
+      <button class="btn btn-ghost" id="provider-model-refresh" type="button">Refresh</button>
+    </div>
+    <div class="provider-model-table-wrap">
+      <table class="provider-model-table">
+        <thead><tr><th>Model</th><th>Context</th><th>Price in / out</th></tr></thead>
+        <tbody>
+          ${result.items.map(model => `
+            <tr>
+              <td><strong>${escapeHtml(model.name || model.id)}</strong><code>${escapeHtml(model.id)}</code></td>
+              <td>${fmtCtx(model.contextWindow) || '—'}</td>
+              <td>${formatModelPrice(model.cost)}</td>
+            </tr>
+          `).join('') || '<tr><td colspan="3" class="provider-model-empty">No models match your search.</td></tr>'}
+        </tbody>
+      </table>
+    </div>
+    <div class="provider-model-pagination">
+      <span>${first}–${last} of ${result.total}</span>
+      <div>
+        <button class="btn btn-ghost" id="provider-model-prev" type="button" ${result.page <= 1 ? 'disabled' : ''}>Previous</button>
+        <span>Page ${result.page} of ${result.totalPages}</span>
+        <button class="btn btn-primary" id="provider-model-next" type="button" ${result.page >= result.totalPages ? 'disabled' : ''}>Next</button>
+      </div>
+    </div>
+  `;
+
+  document.getElementById('provider-model-search').addEventListener('input', event => {
+    state.providerModelFilter = event.target.value;
+    state.providerModelPage = 1;
+    renderProviderModelBrowser();
+    const search = document.getElementById('provider-model-search');
+    search?.focus();
+    search?.setSelectionRange(search.value.length, search.value.length);
+  });
+  document.getElementById('provider-model-prev').addEventListener('click', () => {
+    state.providerModelPage -= 1;
+    renderProviderModelBrowser();
+  });
+  document.getElementById('provider-model-next').addEventListener('click', () => {
+    state.providerModelPage += 1;
+    renderProviderModelBrowser();
+  });
+  document.getElementById('provider-model-refresh').addEventListener('click', async event => {
+    const button = event.currentTarget;
+    button.disabled = true;
+    button.textContent = 'Refreshing…';
+    const refreshed = await refreshProvider(provider.id);
+    if (!refreshed.ok) {
+      showToast(refreshed.error ?? 'Refresh failed');
+      button.disabled = false;
+      button.textContent = 'Refresh';
+      return;
+    }
+    await initModels();
+    renderProviders();
+    renderProviderStats();
+    renderProviderModelBrowser();
+    showToast(`${refreshed.count} models refreshed`);
+  });
+}
+
 function buildTemplateCard(template) {
   const [c1, c2] = providerPalette(template.id);
   const initial = providerInitial(template.name);
@@ -1404,6 +1548,7 @@ function initNav() {
   setActive('providers');
 
   content.addEventListener('scroll', () => {
+    if (content.classList.contains('provider-browser-open')) return;
     const contentTop = content.getBoundingClientRect().top;
     const threshold = content.clientHeight * 0.4;
     let activeId = 'providers';
@@ -1508,8 +1653,12 @@ async function init() {
     renderAgyList();
     if (state.modelFilter) buildModelResults(state.modelFilter, 'general');
     if (state.agyFilter)   buildModelResults(state.agyFilter, 'agy');
+    syncProviderModelBrowserFromHash();
   });
 
+  window.addEventListener('hashchange', syncProviderModelBrowserFromHash);
+  syncProviderModelBrowserFromHash();
+
   document.getElementById('provider-search').addEventListener('input', e => {
     state.providerFilter = e.target.value;
     renderProviders();

package/dist/ui/public/index.html

@@ -15,7 +15,13 @@
 
     <!-- Sidebar -->
     <aside class="sidebar">
-      <div class="sidebar-brand">
+      <a
+        class="sidebar-brand"
+        href="https://github.com/jacob-bd/relay-ai"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Open the relay-ai GitHub repository"
+      >
         <div class="brand-logo">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
             <defs>
@@ -42,7 +48,7 @@
           <div class="brand-name">relay<span class="brand-accent">-ai</span></div>
           <div class="brand-byline">by jacob-bd</div>
         </div>
-      </div>
+      </a>
 
       <div class="sidebar-version-area" id="sidebar-version-area">
         <div class="sidebar-version">v{{VERSION}}</div>
@@ -236,6 +242,8 @@
         <div id="server-panel"></div>
       </section>
 
+      <section id="provider-model-browser" class="section provider-model-browser" aria-live="polite"></section>
+
     </main>
   </div>
 

package/dist/ui/public/provider-model-browser.js

@@ -0,0 +1,29 @@
+export const PROVIDER_MODEL_PAGE_SIZE = 25;
+
+export function filterProviderModels(models, query) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return models;
+  return models.filter(model =>
+    model.id.toLowerCase().includes(needle)
+    || (model.name ?? '').toLowerCase().includes(needle),
+  );
+}
+
+export function getProviderModelPage(models, query, requestedPage) {
+  const filtered = filterProviderModels(models, query);
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PROVIDER_MODEL_PAGE_SIZE));
+  const page = Math.min(Math.max(1, requestedPage), totalPages);
+  const start = (page - 1) * PROVIDER_MODEL_PAGE_SIZE;
+  return {
+    items: filtered.slice(start, start + PROVIDER_MODEL_PAGE_SIZE),
+    page,
+    total: filtered.length,
+    totalPages,
+  };
+}
+
+export function formatModelPrice(cost) {
+  if (!cost || !Number.isFinite(cost.input) || !Number.isFinite(cost.output)) return '—';
+  const format = value => `$${value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 4 })}`;
+  return `${format(cost.input)} / ${format(cost.output)}`;
+}

package/dist/ui/public/style.css

@@ -125,8 +125,14 @@ input { font-family: inherit; }
   align-items: center;
   gap: 12px;
   padding: 28px 24px 20px;
+  color: inherit;
+  text-decoration: none;
+  transition: background var(--dur-sm) var(--ease);
 }
 
+.sidebar-brand:hover { background: var(--surface-hover); }
+.sidebar-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+
 .brand-logo {
   width: 46px;
   height: 46px;
@@ -928,6 +934,21 @@ input { font-family: inherit; }
   border-bottom-right-radius: calc(var(--radius) - 1px);
 }
 
+.provider-config-toggle {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: var(--radius-sm);
+  color: var(--text-3);
+}
+
+.provider-config-toggle:hover,
+.provider-config-toggle:focus-visible {
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
 .provider-card-header:hover { background: var(--surface-hover); }
 .provider-card.open .provider-card-header {
   background: var(--surface-2);
@@ -1039,6 +1060,99 @@ input { font-family: inherit; }
   color: var(--accent);
 }
 
+/* Provider model browser */
+.provider-model-browser { display: none; max-width: 960px; }
+.content.provider-browser-open > .section { display: none; }
+.content.provider-browser-open > .provider-model-browser { display: block; margin: 0; border: 0; }
+
+.provider-browser-back {
+  display: inline-flex;
+  margin-bottom: 26px;
+  color: var(--text-2);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.provider-browser-back:hover { color: var(--accent); }
+
+.provider-browser-hero {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 28px;
+}
+
+.provider-browser-hero .section-eyebrow { margin-bottom: 3px; }
+.provider-browser-hero .section-heading { margin-bottom: 4px; }
+
+.provider-browser-tools {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.provider-model-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+
+.provider-model-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.provider-model-table th {
+  padding: 11px 16px;
+  text-align: left;
+  color: var(--text-3);
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.provider-model-table th:nth-child(2) { width: 120px; }
+.provider-model-table th:nth-child(3) { width: 170px; }
+
+.provider-model-table td {
+  padding: 12px 16px;
+  color: var(--text-2);
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}
+
+.provider-model-table tr:last-child td { border-bottom: 0; }
+.provider-model-table tbody tr:hover { background: var(--surface-hover); }
+.provider-model-table strong { display: block; color: var(--text-1); font-size: 14px; }
+.provider-model-table code { display: block; margin-top: 3px; color: var(--text-3); font-size: 12px; }
+.provider-model-table .provider-model-empty { padding: 34px 16px; text-align: center; color: var(--text-3); }
+
+.provider-model-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding-top: 14px;
+  color: var(--text-3);
+  font-size: 13px;
+}
+
+.provider-model-pagination > div { display: flex; align-items: center; gap: 10px; }
+.provider-browser-empty { padding-top: 52px; color: var(--text-2); }
+
+@media (max-width: 760px) {
+  .provider-browser-tools { grid-template-columns: 1fr; }
+  .provider-model-pagination { align-items: flex-start; flex-direction: column; }
+  .provider-model-table th:nth-child(2) { width: 90px; }
+  .provider-model-table th:nth-child(3) { width: 140px; }
+}
+
 /* Provider body expand */
 .provider-body {
   display: grid;

package/dist/{ui-command-JG3BFVSL.js → ui-command-2HNQX7U3.js}

@@ -65,7 +65,7 @@ import {
   summarizeServerProviders,
   validateCustomEndpointUrl,
   writeSecureLogLine
-} from "./chunk-XCB2K4GI.js";
+} from "./chunk-YM6G7BHE.js";
 import {
   __toCommonJS,
   init_provider_templates,
@@ -1453,4 +1453,4 @@ export {
   resolveUiShutdownDecision,
   runUiCommand
 };
-//# sourceMappingURL=ui-command-JG3BFVSL.js.map
+//# sourceMappingURL=ui-command-2HNQX7U3.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jacobbd/relay-ai",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "publishConfig": {
     "access": "public"
   },