@jacobbd/relay-ai 0.7.2 → 0.7.3

package/dist/ui/public/app.js

@@ -1,6 +1,7 @@
 import {
   formatModelPrice,
   getProviderModelPage,
+  isFreeModel,
   PROVIDER_MODEL_PAGE_SIZE,
 } from './provider-model-browser.js';
 import { copyDeviceCode, copyTextToClipboard, oauthConnectionLabel } from './oauth-device.js';
@@ -24,6 +25,8 @@ const state = {
   providerFilter: '',
   activeProviderId: null,
   providerModelFilter: '',
+  providerModelMinCtx: 0,
+  providerModelFreeOnly: false,
   providerModelPage: 1,
   modelFilter: '',
   modelFreeOnly: false,
@@ -351,10 +354,6 @@ function fmtCtx(n) {
   return String(n);
 }
 
-function isFreeModel(model) {
-  return Boolean(model?.isFree || model?.freeStatus === 'verified_free' || model?.freeStatus === 'free_provider');
-}
-
 function freeBadgeLabel(model) {
   if (model?.freeStatus === 'free_provider') {
     const isCloudflare = model?.providerId === 'cloudflare' || model?.id?.startsWith('@cf/') || model?.id?.startsWith('@hf/');
@@ -503,7 +502,87 @@ function syncProviderModelBrowserFromHash() {
   renderProviderModelBrowser();
 }
 
+let activeModelFavPopover = null;
+
+function closeModelFavPopover() {
+  if (activeModelFavPopover) {
+    activeModelFavPopover.remove();
+    activeModelFavPopover = null;
+  }
+}
+
+function toggleModelFavoriteMenu(button, providerId, modelId) {
+  const targetKey = `${providerId}::${modelId}`;
+  if (activeModelFavPopover && activeModelFavPopover.dataset.targetId === targetKey) {
+    closeModelFavPopover();
+    return;
+  }
+  closeModelFavPopover();
+
+  const isGenFav = isGeneralFavorite(providerId, modelId);
+  const isAgyFav = state.agyFavorites.some(f => f.providerId === providerId && f.modelId === modelId);
+  const genAtCapacity = state.generalFavorites.length >= GENERAL_MAX;
+  const agyAtCapacity = state.agyFavorites.length >= AGY_MAX;
+
+  const popover = document.createElement('div');
+  popover.className = 'model-fav-popover';
+  popover.dataset.targetId = targetKey;
+
+  const genDisabled = isGenFav || genAtCapacity;
+  let genLabel = '★ Add to Favorites';
+  if (isGenFav) genLabel = '✓ In Global Favorites';
+  else if (genAtCapacity) genLabel = `★ Favorites full (${GENERAL_MAX}/${GENERAL_MAX})`;
+
+  const agyDisabled = isAgyFav || agyAtCapacity;
+  let agyLabel = '✦ Add to Antigravity Favorites';
+  if (isAgyFav) agyLabel = '✓ In Antigravity Favorites';
+  else if (agyAtCapacity) agyLabel = `✦ Antigravity full (${AGY_MAX}/${AGY_MAX})`;
+
+  popover.innerHTML = `
+    <button class="model-fav-popover-item ${genDisabled ? 'disabled' : ''}" type="button" data-type="general" ${genDisabled ? 'disabled' : ''}>
+      <span>${genLabel}</span>
+      <span class="popover-slot-count">${state.generalFavorites.length}/${GENERAL_MAX}</span>
+    </button>
+    <button class="model-fav-popover-item ${agyDisabled ? 'disabled' : ''}" type="button" data-type="agy" ${agyDisabled ? 'disabled' : ''}>
+      <span>${agyLabel}</span>
+      <span class="popover-slot-count">${state.agyFavorites.length}/${AGY_MAX}</span>
+    </button>
+  `;
+
+  popover.querySelectorAll('.model-fav-popover-item').forEach(item => {
+    item.addEventListener('click', event => {
+      event.stopPropagation();
+      const listType = item.dataset.type;
+      addToFavorites({ providerId, modelId }, listType);
+      closeModelFavPopover();
+      showToast(listType === 'agy' ? 'Added to Antigravity Favorites' : 'Added to Global Favorites');
+      renderProviderModelBrowser();
+    });
+  });
+
+  const rect = button.getBoundingClientRect();
+  popover.style.position = 'fixed';
+  popover.style.top = `${rect.bottom + 4}px`;
+  popover.style.left = `${Math.max(10, rect.right - 220)}px`;
+  popover.style.zIndex = '9999';
+
+  document.body.appendChild(popover);
+  activeModelFavPopover = popover;
+}
+
+document.addEventListener('click', event => {
+  if (activeModelFavPopover && !activeModelFavPopover.contains(event.target) && !event.target.closest('.btn-model-add')) {
+    closeModelFavPopover();
+  }
+});
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape' && activeModelFavPopover) {
+    closeModelFavPopover();
+  }
+});
+
 function renderProviderModelBrowser() {
+  closeModelFavPopover();
   const container = document.getElementById('provider-model-browser');
   if (!state.activeProviderId) return;
 
@@ -515,7 +594,11 @@ function renderProviderModelBrowser() {
     return;
   }
 
-  const result = getProviderModelPage(provider.models ?? [], state.providerModelFilter, state.providerModelPage);
+  const showActions = !isServerAdminUi();
+  const result = getProviderModelPage(provider.models ?? [], state.providerModelFilter, state.providerModelPage, {
+    minContextWindow: state.providerModelMinCtx,
+    freeOnly: state.providerModelFreeOnly,
+  });
   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);
@@ -537,19 +620,37 @@ function renderProviderModelBrowser() {
         <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>
+      <div class="provider-model-filters">
+        <select class="filter-select" id="provider-model-ctx-select" aria-label="Filter by context window size">
+          <option value="0" ${state.providerModelMinCtx === 0 ? 'selected' : ''}>All context sizes</option>
+          <option value="128000" ${state.providerModelMinCtx === 128000 ? 'selected' : ''}>≥ 128k</option>
+          <option value="200000" ${state.providerModelMinCtx === 200000 ? 'selected' : ''}>≥ 200k</option>
+          <option value="500000" ${state.providerModelMinCtx === 500000 ? 'selected' : ''}>≥ 500k</option>
+          <option value="1000000" ${state.providerModelMinCtx === 1000000 ? 'selected' : ''}>≥ 1M</option>
+        </select>
+        <label class="filter-checkbox-label">
+          <input type="checkbox" id="provider-model-free-checkbox" ${state.providerModelFreeOnly ? 'checked' : ''}>
+          <span>Free models only</span>
+        </label>
+      </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>
+        <thead><tr><th>Model</th><th>Context</th><th>Price in / out</th>${showActions ? '<th class="th-actions">Actions</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, isFreeModel(model), freeBadgeLabel(model))}</td>
+              ${showActions ? `
+                <td class="td-actions">
+                  <button class="btn-model-add" type="button" data-model-id="${escapeHtml(model.id)}" title="Add to favorites">+</button>
+                </td>
+              ` : ''}
             </tr>
-          `).join('') || '<tr><td colspan="3" class="provider-model-empty">No models match your search.</td></tr>'}
+          `).join('') || `<tr><td colspan="${showActions ? 4 : 3}" class="provider-model-empty">No models match your search and filters.</td></tr>`}
         </tbody>
       </table>
     </div>
@@ -571,6 +672,25 @@ function renderProviderModelBrowser() {
     search?.focus();
     search?.setSelectionRange(search.value.length, search.value.length);
   });
+  document.getElementById('provider-model-ctx-select')?.addEventListener('change', event => {
+    state.providerModelMinCtx = parseInt(event.target.value, 10) || 0;
+    state.providerModelPage = 1;
+    renderProviderModelBrowser();
+  });
+  document.getElementById('provider-model-free-checkbox')?.addEventListener('change', event => {
+    state.providerModelFreeOnly = event.target.checked;
+    state.providerModelPage = 1;
+    renderProviderModelBrowser();
+  });
+  if (showActions) {
+    container.querySelectorAll('.btn-model-add').forEach(btn => {
+      btn.addEventListener('click', event => {
+        event.stopPropagation();
+        const modelId = btn.dataset.modelId;
+        toggleModelFavoriteMenu(btn, provider.id, modelId);
+      });
+    });
+  }
   document.getElementById('provider-model-prev').addEventListener('click', () => {
     state.providerModelPage -= 1;
     renderProviderModelBrowser();
@@ -2336,6 +2456,7 @@ function seedServerFormFromSaved(saved) {
   f.freeModelsOnly = Boolean(saved.freeModelsOnly);
   f.exposedProviders = saved.exposedProviders ? [...saved.exposedProviders] : [];
   f.maskGatewayIds = saved.maskGatewayIds;
+  f.autostart = Boolean(saved.autostart);
   // Published Docker ports only reach 0.0.0.0 inside the container.
   f.listenMode = isServerAdminUi() || saved.listenMode === 'network' ? 'network' : 'local';
   // Env password (Docker): prefill the field so Start works and clients can copy it.
@@ -2530,6 +2651,10 @@ function renderServerSetup(s) {
           <input type="checkbox" ${f.freeModelsOnly ? 'checked' : ''} onchange="setServerFreeModelsOnly(this.checked)">
           <span>Free models only <span class="server-field-hint">(includes verified $0 models and free developer access)</span></span>
         </label>
+        <label class="server-toggle-row">
+          <input type="checkbox" ${f.autostart ? 'checked' : ''} onchange="setServerAutostart(this.checked)">
+          <span>Auto-start API Gateway when relay-ai starts <span class="server-field-hint">(port 17645 auto-starts on service boot)</span></span>
+        </label>
         <div class="server-field-hint">${escapeHtml(freeModelsHint)}</div>
       </div>
 
@@ -2695,6 +2820,12 @@ function setServerFreeModelsOnly(checked) {
   renderServerPanel();
 }
 
+function setServerAutostart(checked) {
+  state.server.form.autostart = checked;
+  api('POST', '/api/server/config', { autostart: checked }).catch(() => {});
+  renderServerPanel();
+}
+
 function setServerListenMode(mode) {
   state.server.form.listenMode = mode;
   state.server.error = null;
@@ -2735,6 +2866,7 @@ async function submitServerStart() {
       : null,
     maskGatewayIds: f.maskGatewayIds,
     listenMode: f.listenMode,
+    autostart: f.autostart,
     passwordMode: f.passwordMode,
     password: f.password,
     savePassword: f.savePassword,

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

@@ -1,16 +1,35 @@
 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 isFreeModel(model) {
+  return Boolean(
+    model?.isFree
+    || model?.freeStatus === 'verified_free'
+    || model?.freeStatus === 'free_provider'
+    || (model?.cost && model?.cost.input === 0 && model?.cost.output === 0),
   );
 }
 
-export function getProviderModelPage(models, query, requestedPage) {
-  const filtered = filterProviderModels(models, query);
+export function filterProviderModels(models, query, opts = {}) {
+  const needle = query.trim().toLowerCase();
+  const minCtx = opts.minContextWindow ?? 0;
+  const freeOnly = Boolean(opts.freeOnly);
+
+  return models.filter(model => {
+    if (needle && !model.id.toLowerCase().includes(needle) && !(model.name ?? '').toLowerCase().includes(needle)) {
+      return false;
+    }
+    if (minCtx > 0 && (model.contextWindow ?? 0) < minCtx) {
+      return false;
+    }
+    if (freeOnly && !isFreeModel(model)) {
+      return false;
+    }
+    return true;
+  });
+}
+
+export function getProviderModelPage(models, query, requestedPage, opts = {}) {
+  const filtered = filterProviderModels(models, query, opts);
   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;

package/dist/ui/public/style.css

@@ -1194,12 +1194,55 @@ input { font-family: inherit; }
 .provider-browser-hero .section-heading { margin-bottom: 4px; }
 
 .provider-browser-tools {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
   margin-bottom: 14px;
 }
 
+.provider-browser-tools .search-field {
+  flex: 1;
+  min-width: 200px;
+}
+
+.provider-model-filters {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.filter-select {
+  padding: 7px 12px;
+  font-size: 13px;
+  color: var(--text-1);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  outline: none;
+  cursor: pointer;
+}
+
+.filter-select:focus {
+  border-color: var(--accent, #00d2b8);
+}
+
+.filter-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-2);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.filter-checkbox-label input {
+  accent-color: var(--accent, #00d2b8);
+  cursor: pointer;
+}
+
 .provider-model-table-wrap {
   overflow-x: auto;
   border: 1px solid var(--border);
@@ -1225,8 +1268,82 @@ input { font-family: inherit; }
   text-transform: uppercase;
 }
 
-.provider-model-table th:nth-child(2) { width: 120px; }
-.provider-model-table th:nth-child(3) { width: 170px; }
+.provider-model-table th:nth-child(2) { width: 110px; }
+.provider-model-table th:nth-child(3) { width: 160px; }
+.provider-model-table th.th-actions { width: 80px; text-align: center; }
+.provider-model-table td.td-actions { text-align: center; }
+
+.btn-model-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  color: var(--text-1);
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.btn-model-add:hover {
+  background: var(--surface-hover);
+  border-color: var(--accent, #00d2b8);
+  color: var(--accent, #00d2b8);
+}
+
+.model-fav-popover {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
+  padding: 5px;
+  width: 230px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  animation: popoverFadeIn 0.12s ease-out;
+}
+
+@keyframes popoverFadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.model-fav-popover-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border-radius: 5px;
+  border: 0;
+  background: transparent;
+  color: var(--text-1);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+
+.model-fav-popover-item:hover:not(.disabled) {
+  background: var(--surface-hover);
+  color: var(--accent, #00d2b8);
+}
+
+.model-fav-popover-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.popover-slot-count {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-left: 6px;
+}
 
 .provider-model-table td {
   padding: 12px 16px;

package/dist/{ui-command-5VEFZ5GM.js → ui-command-DMPYSK7W.js}

@@ -58,6 +58,7 @@ import {
   resolveAdvertiseAddresses,
   resolveAdvertiseGatewayPort,
   resolveProviderCredential,
+  resolveServerAutostart,
   resolveServerUpstreamApiKey,
   saveNativeOAuthCredential,
   savePreferences,
@@ -65,6 +66,7 @@ import {
   sendJson,
   setAppPathOverride,
   setSavedServerPassword,
+  setServerAutostart,
   setServerExposedProviders,
   setServerFavoritesOnly,
   setServerFreeModelsOnly,
@@ -75,7 +77,7 @@ import {
   supportsClaudeTransparentMode,
   validateCustomEndpointUrl,
   writeSecureLogLine
-} from "./chunk-LNQ46VW7.js";
+} from "./chunk-5LPUIWNJ.js";
 import {
   __toCommonJS,
   init_provider_templates,
@@ -397,6 +399,7 @@ async function buildSavedConfig() {
     exposedProviders: getServerExposedProviders(),
     maskGatewayIds: getServerMaskGatewayIds(),
     listenMode: getServerListenMode(),
+    autostart: resolveServerAutostart(),
     hasSavedPassword: await hasSavedPasswordCached(),
     hasEnvPassword: Boolean(envPassword),
     ...envPassword ? { prefillPassword: envPassword } : {}
@@ -509,6 +512,9 @@ async function doStartGatewayServer(req, opts) {
   }
   setServerMaskGatewayIds(req.maskGatewayIds);
   setServerListenMode(req.listenMode);
+  if (req.autostart !== void 0) {
+    setServerAutostart(req.autostart);
+  }
   const host = req.listenMode === "network" ? "0.0.0.0" : "127.0.0.1";
   const gateway = req.maskGatewayIds ? { maskGatewayIds: true } : void 0;
   let handle;
@@ -536,7 +542,8 @@ async function doStartGatewayServer(req, opts) {
       freeModelsOnly: req.freeModelsOnly,
       exposedProviders: req.exposedProviders,
       maskGatewayIds: req.maskGatewayIds,
-      listenMode: req.listenMode
+      listenMode: req.listenMode,
+      autostart: req.autostart ?? resolveServerAutostart()
     },
     providerSummary: summarizeServerProviders(models),
     modelRows: buildModelRows(models, gateway)
@@ -551,6 +558,23 @@ async function stopGatewayServer() {
   }
   return { ok: true, stopped: false };
 }
+async function startGatewayServerFromSavedConfig(opts) {
+  const req = {
+    favoritesOnly: getServerFavoritesOnly(),
+    freeModelsOnly: getServerFreeModelsOnly(),
+    exposedProviders: getServerExposedProviders(),
+    maskGatewayIds: getServerMaskGatewayIds(),
+    listenMode: getServerListenMode(),
+    autostart: resolveServerAutostart(),
+    passwordMode: "saved"
+  };
+  const res = await startGatewayServer(req, opts);
+  if (res.ok) {
+    return res.status;
+  }
+  console.warn(`[server-autostart] Warning: ${res.error}`);
+  return null;
+}
 
 // src/ui/api.ts
 var execAsync = promisify(exec);
@@ -650,6 +674,8 @@ function handleUiApiRequest(req, res, opts = {}) {
     handleStartServer(req, res, opts);
   } else if (url === "/api/server/stop" && req.method === "POST") {
     handleStopServer(res, opts);
+  } else if (url === "/api/server/config" && req.method === "POST") {
+    handlePostServerConfig(req, res);
   } else {
     sendJson(res, 404, { error: "Not found" });
   }
@@ -1284,6 +1310,7 @@ async function handleStartServer(req, res, opts) {
       exposedProviders: Array.isArray(body.exposedProviders) ? body.exposedProviders : null,
       maskGatewayIds: body.maskGatewayIds,
       listenMode,
+      autostart: typeof body.autostart === "boolean" ? body.autostart : void 0,
       passwordMode: body.passwordMode === "saved" ? "saved" : "new",
       password: typeof body.password === "string" ? body.password : void 0,
       savePassword: Boolean(body.savePassword)
@@ -1303,6 +1330,17 @@ async function handleStartServer(req, res, opts) {
     sendJson(res, 500, { ok: false, error: String(err) });
   }
 }
+async function handlePostServerConfig(req, res) {
+  try {
+    const body = JSON.parse(await readBody(req));
+    if (typeof body.autostart === "boolean") {
+      setServerAutostart(body.autostart);
+    }
+    sendJson(res, 200, { ok: true });
+  } catch (err) {
+    sendJson(res, 400, { error: String(err) });
+  }
+}
 async function handleStopServer(res, opts) {
   try {
     const result = await stopGatewayServer();
@@ -1454,11 +1492,35 @@ function removeLock() {
   } catch {
   }
 }
-function checkExistingServer() {
+async function probeServerHealth(port) {
+  try {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), 500);
+    const res = await fetch(`http://127.0.0.1:${port}/api/config`, { signal: controller.signal });
+    clearTimeout(timer);
+    if (res.status === 200) {
+      const data = await res.json().catch(() => null);
+      if (data && typeof data === "object") return true;
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
+async function checkExistingServer() {
   if (!existsSync3(LOCK_FILE)) return null;
   try {
     const { pid, port } = JSON.parse(readFileSync(LOCK_FILE, "utf8"));
+    if (pid === process.pid) {
+      removeLock();
+      return null;
+    }
     process.kill(pid, 0);
+    const isAlive = await probeServerHealth(port ?? DEFAULT_SERVER_UI_PORT);
+    if (!isAlive) {
+      removeLock();
+      return null;
+    }
     return `http://127.0.0.1:${port}`;
   } catch {
     removeLock();
@@ -1487,7 +1549,7 @@ async function resolveUiShutdownDecision(signal, promptClose = () => p.confirm({
 async function runUiCommand(opts = {}) {
   const runtime = resolveUiRuntimeConfig(opts);
   await ensureOpencodeCloudProviders();
-  const existing = checkExistingServer();
+  const existing = await checkExistingServer();
   if (existing) {
     console.log(`
   ${pc.bold("relay-ai UI")} already running at ${pc.cyan(existing)}
@@ -1542,6 +1604,11 @@ async function runUiCommand(opts = {}) {
   const url = `http://${displayHost}:${port}`;
   mkdirSync(getAppHome(), { recursive: true });
   writeFileSync2(LOCK_FILE, JSON.stringify({ pid: process.pid, port, mode: runtime.mode }));
+  if (resolveServerAutostart()) {
+    startGatewayServerFromSavedConfig().catch((err) => {
+      trace?.(`gateway autostart error: ${err instanceof Error ? err.message : String(err)}`);
+    });
+  }
   const cleanup = () => {
     removeLock();
     server.close();
@@ -1596,11 +1663,13 @@ async function runUiCommand(opts = {}) {
   return 0;
 }
 export {
+  checkExistingServer,
   formatUiServerLifecycleMessage,
   isUiApiRoute,
+  probeServerHealth,
   resolveUiMode,
   resolveUiRuntimeConfig,
   resolveUiShutdownDecision,
   runUiCommand
 };
-//# sourceMappingURL=ui-command-5VEFZ5GM.js.map
+//# sourceMappingURL=ui-command-DMPYSK7W.js.map