@jacobbd/relay-ai 0.4.5 → 0.4.7

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: '',
@@ -25,6 +34,7 @@ const state = {
   appModelFilters: {},
   appModelOpen: null,
   appSelections: {},
+  appHttpProxy: {},
   server: {
     status: null,
     error: null,
@@ -293,6 +303,7 @@ async function loadModels() {
       freeStatus: m.freeStatus,
       freeLabel: m.freeLabel,
       cost: m.cost,
+      claudeTransparentCompatible: Boolean(m.claudeTransparentCompatible),
     });
     if (typeof p.modelCount === 'number') p._rawCount = p.modelCount;
   }
@@ -436,7 +447,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 +465,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 +482,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 +1550,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 +1655,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();
@@ -1649,6 +1800,16 @@ function appModelInputValue(appId) {
   return getAppSelection(appId).label;
 }
 
+function claudeHttpProxyAvailable(appId) {
+  if (appId !== 'claude') return false;
+  const selection = getAppSelection(appId);
+  if (selection.mode !== 'model') return true;
+  const model = state.allModels.find(
+    candidate => candidate.providerId === selection.providerId && candidate.id === selection.modelId,
+  );
+  return Boolean(model?.claudeTransparentCompatible);
+}
+
 function matchedAppModels(appId) {
   const localFilter = state.appModelFilters[appId] ?? '';
   const q = (localFilter || state.appModelFilter).trim().toLowerCase();
@@ -1749,6 +1910,7 @@ function renderApps() {
     const modelInputValue = appModelInputValue(app.id);
     const modelResults = state.appModelOpen === app.id ? buildAppModelResults(app.id) : '';
     const launchFolder = state.appLaunchFolders[app.id] ?? '';
+    const httpProxyAvailable = claudeHttpProxyAvailable(app.id);
     const recentFolders = state.recentLaunchFolders
       .map(folder => `<button class="launch-folder-chip" type="button" onclick="selectLaunchFolder('${app.id}', '${encodeURIComponent(folder)}')">${escapeHtml(folder)}</button>`)
       .join('');
@@ -1782,6 +1944,16 @@ function renderApps() {
                 ` : ''}
               </div>
             </div>
+            ${app.id === 'claude' ? `
+            <label class="claude-proxy-option${httpProxyAvailable ? '' : ' is-disabled'}">
+              <input type="checkbox" ${state.appHttpProxy[app.id] && httpProxyAvailable ? 'checked' : ''} ${httpProxyAvailable ? '' : 'disabled'} onchange="setClaudeHttpProxy('${app.id}', this.checked)">
+              <span class="claude-proxy-label">
+                Keep my Anthropic login and add Relay models
+                <span class="claude-proxy-tooltip" tabindex="0" role="img" aria-label="Launches Claude Code through a temporary local connection. Your normal Anthropic login and models continue to work, while compatible Relay AI favorites become available for model switching. The connection closes automatically when Claude Code exits." data-tooltip="Launches Claude Code through a temporary local connection. Your normal Anthropic login and models continue to work, while compatible Relay AI favorites become available for model switching. The connection closes automatically when Claude Code exits.">?</span>
+                ${httpProxyAvailable ? '' : '<span class="claude-proxy-unavailable">This selected model cannot be combined with your Anthropic login.</span>'}
+              </span>
+            </label>
+            ` : ''}
             ${app.type !== 'app' ? `
             <div class="launch-folder-control">
               <label style="font-size: 12px; font-weight: 500; color: var(--color-muted);">Launch folder 📁</label>
@@ -1864,6 +2036,9 @@ async function launchApp(appId) {
     body.providerId = selection.providerId;
     body.modelId = selection.modelId;
   }
+  if (appId === 'claude' && state.appHttpProxy[appId] && claudeHttpProxyAvailable(appId)) {
+    body.httpProxy = true;
+  }
 
   const folder = (state.appLaunchFolders[appId] ?? '').trim();
   if (folder) {
@@ -1968,6 +2143,9 @@ function selectLaunchModel(appId, encodedProviderId, encodedModelId) {
   const favorite = isGeneralFavorite(providerId, modelId);
   const label = `${favorite ? '★ ' : ''}${model?.name || modelId}`;
   state.appSelections[appId] = { mode: 'model', providerId, modelId, label };
+  if (appId === 'claude' && !model?.claudeTransparentCompatible) {
+    state.appHttpProxy[appId] = false;
+  }
   state.appModelOpen = null;
   state.appModelFilters[appId] = '';
   renderApps();
@@ -1977,6 +2155,10 @@ function setLaunchFolder(appId, value) {
   state.appLaunchFolders[appId] = value;
 }
 
+function setClaudeHttpProxy(appId, checked) {
+  state.appHttpProxy[appId] = claudeHttpProxyAvailable(appId) && Boolean(checked);
+}
+
 function selectLaunchFolder(appId, encodedFolder) {
   state.appLaunchFolders[appId] = decodeURIComponent(encodedFolder);
   renderApps();
@@ -2033,6 +2215,7 @@ window.selectLaunchDefault = selectLaunchDefault;
 window.selectLaunchFavorites = selectLaunchFavorites;
 window.selectLaunchModel = selectLaunchModel;
 window.setLaunchFolder = setLaunchFolder;
+window.setClaudeHttpProxy = setClaudeHttpProxy;
 window.selectLaunchFolder = selectLaunchFolder;
 window.browseLaunchFolder = browseLaunchFolder;
 window.saveAppPath = saveAppPath;

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;
@@ -768,6 +774,95 @@ input { font-family: inherit; }
   gap: 4px;
 }
 
+.claude-proxy-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--text-2);
+  cursor: pointer;
+}
+
+.claude-proxy-option input {
+  width: 15px;
+  height: 15px;
+  margin-top: 2px;
+  accent-color: var(--accent);
+  flex: 0 0 auto;
+}
+
+.claude-proxy-option.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.claude-proxy-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.45;
+  flex-wrap: wrap;
+}
+
+.claude-proxy-unavailable {
+  flex-basis: 100%;
+  color: var(--text-3);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.claude-proxy-tooltip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 17px;
+  height: 17px;
+  border: 1px solid var(--border-bright);
+  border-radius: 999px;
+  color: var(--text-3);
+  font-size: 11px;
+  font-weight: 700;
+  cursor: help;
+  outline: none;
+}
+
+.claude-proxy-tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  z-index: 90;
+  right: -4px;
+  bottom: calc(100% + 9px);
+  width: min(310px, 72vw);
+  padding: 9px 11px;
+  border: 1px solid var(--border-bright);
+  border-radius: var(--radius-sm);
+  background: var(--surface-raised);
+  box-shadow: 0 12px 28px oklch(0% 0 0 / 0.26);
+  color: var(--text-1);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.45;
+  text-align: left;
+  transform: translateY(4px);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
+}
+
+.claude-proxy-tooltip:hover::after,
+.claude-proxy-tooltip:focus-visible::after {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
 .launch-model-input-wrap {
   position: relative;
 }
@@ -928,6 +1023,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 +1149,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;