@jacobbd/relay-ai 0.4.6 → 0.4.8

package/dist/ui/public/app.js

@@ -34,6 +34,7 @@ const state = {
   appModelFilters: {},
   appModelOpen: null,
   appSelections: {},
+  appHttpProxy: {},
   server: {
     status: null,
     error: null,
@@ -302,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;
   }
@@ -1798,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();
@@ -1898,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('');
@@ -1931,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>
@@ -2013,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) {
@@ -2117,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();
@@ -2126,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();
@@ -2182,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;
@@ -2298,10 +2332,14 @@ function renderServerProviderPicker() {
     const label = p ? p.name : id;
     return `<span class="server-provider-chip">${escapeHtml(label)}<button type="button" onclick="toggleServerProvider('${id}')" aria-label="Remove ${escapeHtml(label)}">&times;</button></span>`;
   }).join('');
+  const allFreeNote = s.form.freeModelsOnly && s.form.exposedProviders.length === 0
+    ? '<div class="server-field-hint">No providers selected — exposing free models from every available provider.</div>'
+    : '';
 
   return `
     <div class="server-providers-picker">
       ${chips ? `<div class="server-provider-chips">${chips}</div>` : ''}
+      ${allFreeNote}
       <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 type="search" class="search-input" placeholder="Search providers to expose…" value="${escapeHtml(s.form.providerSearch)}" oninput="setServerProviderSearch(this.value)">
@@ -2343,13 +2381,27 @@ function renderServerNetworkOptions() {
 function renderServerSetup(s) {
   const f = s.form;
   const specific = f.expose === 'specific';
-  const providersOk = f.expose === 'favorites' || (specific && f.exposedProviders.length > 0);
+  const hasProviders = f.exposedProviders.length > 0;
+  // Free-only with no providers selected = expose free models from every provider
+  // (backend: exposedProviders null + freeModelsOnly). Otherwise require a selection.
+  const providersOk = f.expose === 'favorites'
+    || (specific && hasProviders)
+    || (specific && f.freeModelsOnly);
   const passwordOk = f.listenMode !== 'network' || f.passwordMode === 'saved' || f.password.trim().length > 0;
   const canStart = providersOk && passwordOk && !s.starting;
 
   let hint = '';
-  if (!providersOk) hint = 'Select at least one provider to expose.';
-  else if (!passwordOk) hint = 'Enter a server password for network mode.';
+  if (!providersOk) {
+    hint = f.freeModelsOnly
+      ? 'Select at least one provider, or leave none selected to expose free models from all providers.'
+      : 'Select at least one provider to expose.';
+  } else if (!passwordOk) {
+    hint = 'Enter a server password for network mode.';
+  }
+
+  const freeModelsHint = specific
+    ? 'With providers selected, only their free models are exposed. With none selected, free models from every available provider are exposed.'
+    : 'Includes verified $0 models and free developer access.';
 
   return `
     <div class="server-setup">
@@ -2371,6 +2423,7 @@ 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>
+        <div class="server-field-hint">${escapeHtml(freeModelsHint)}</div>
       </div>
 
       <div class="server-field">
@@ -2441,8 +2494,8 @@ function renderServerRunning(status) {
     <tr>
       <td>${escapeHtml(m.providerLabel)}</td>
       <td>${escapeHtml(m.name)}</td>
-      <td><code>${escapeHtml(m.anthropicId)}</code></td>
-      <td><code>${escapeHtml(m.openaiId)}</code></td>
+      <td>${serverIdCell(m.anthropicId)}</td>
+      <td>${serverIdCell(m.openaiId)}</td>
     </tr>
   `).join('');
 
@@ -2497,6 +2550,8 @@ function setServerMask(checked) {
 
 function setServerFreeModelsOnly(checked) {
   state.server.form.freeModelsOnly = checked;
+  state.server.error = null;
+  renderServerPanel();
 }
 
 function setServerListenMode(mode) {
@@ -2527,7 +2582,10 @@ async function submitServerStart() {
   const body = {
     favoritesOnly: f.expose === 'favorites',
     freeModelsOnly: f.freeModelsOnly,
-    exposedProviders: f.expose === 'specific' ? f.exposedProviders : null,
+    // Empty specific selection + free-only → null (all providers, free filter applied server-side).
+    exposedProviders: f.expose === 'specific' && f.exposedProviders.length > 0
+      ? f.exposedProviders
+      : null,
     maskGatewayIds: f.maskGatewayIds,
     listenMode: f.listenMode,
     passwordMode: f.passwordMode,
@@ -2565,10 +2623,18 @@ async function stopServerGateway() {
   }
 }
 
-async function copyServerValue(id) {
-  const el = document.getElementById(id);
-  if (!el) return;
-  const text = el.dataset.value ?? el.textContent;
+function serverIdCell(id) {
+  const value = String(id ?? '');
+  if (!value) return '<span class="server-id-empty">—</span>';
+  return `
+    <div class="server-id-cell">
+      <code title="${escapeHtml(value)}">${escapeHtml(value)}</code>
+      <button type="button" class="btn btn-ghost btn-sm server-id-copy" onclick='copyPlainText(${JSON.stringify(value)})'>Copy</button>
+    </div>
+  `;
+}
+
+async function copyPlainText(text) {
   try {
     await navigator.clipboard.writeText(text);
     showToast('Copied to clipboard');
@@ -2577,6 +2643,12 @@ async function copyServerValue(id) {
   }
 }
 
+async function copyServerValue(id) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  await copyPlainText(el.dataset.value ?? el.textContent);
+}
+
 function toggleServerApiKeyVisibility() {
   const el = document.getElementById('server-api-key-value');
   if (!el) return;
@@ -2596,4 +2668,5 @@ window.setServerSavePassword = setServerSavePassword;
 window.submitServerStart = submitServerStart;
 window.stopServerGateway = stopServerGateway;
 window.copyServerValue = copyServerValue;
+window.copyPlainText = copyPlainText;
 window.toggleServerApiKeyVisibility = toggleServerApiKeyVisibility;

package/dist/ui/public/style.css

@@ -401,6 +401,10 @@ input { font-family: inherit; }
   max-width: 680px;
 }
 
+#server.section {
+  max-width: 920px;
+}
+
 .section + .section {
   padding-top: 64px;
   margin-top: 12px;
@@ -774,6 +778,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;
 }
@@ -1794,6 +1887,7 @@ input { font-family: inherit; }
 
 .server-model-table {
   width: 100%;
+  table-layout: fixed;
   border-collapse: collapse;
   font-size: 14px;
 }
@@ -1810,16 +1904,45 @@ input { font-family: inherit; }
   border-bottom: 1px solid var(--border);
 }
 
+.server-model-table th:nth-child(1) { width: 18%; }
+.server-model-table th:nth-child(2) { width: 22%; }
+.server-model-table th:nth-child(3),
+.server-model-table th:nth-child(4) { width: 30%; }
+
 .server-model-table td {
   padding: 9px 14px;
   border-bottom: 1px solid var(--border);
   color: var(--text-1);
+  vertical-align: middle;
+  overflow: hidden;
 }
 
 .server-model-table tr:last-child td { border-bottom: none; }
 
-.server-model-table code {
+.server-id-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.server-id-cell code {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
   font-size: 12px;
   color: var(--text-2);
 }
+
+.server-id-copy {
+  flex-shrink: 0;
+  padding: 3px 8px;
+  font-size: 12px;
+}
+
+.server-id-empty {
+  color: var(--text-3);
+}

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

@@ -63,9 +63,10 @@ import {
   setServerMaskGatewayIds,
   startServer,
   summarizeServerProviders,
+  supportsClaudeTransparentMode,
   validateCustomEndpointUrl,
   writeSecureLogLine
-} from "./chunk-YM6G7BHE.js";
+} from "./chunk-I3SSHXSP.js";
 import {
   __toCommonJS,
   init_provider_templates,
@@ -313,6 +314,12 @@ function getRelayLaunchCommand(appId, options = {}) {
   if (options.trace) {
     args.push("--trace");
   }
+  if (options.httpProxy) {
+    if (app.id !== "claude") {
+      throw new Error("Transparent proxy mode is available only for Claude Code CLI.");
+    }
+    args.push("--http-proxy");
+  }
   if (options.providerId && options.modelId) {
     args.push("--provider", options.providerId, "--model", options.modelId);
   } else if (options.providerId || options.modelId) {
@@ -471,7 +478,9 @@ async function doStartGatewayServer(req) {
   }
   setServerFavoritesOnly(req.favoritesOnly);
   setServerFreeModelsOnly(req.freeModelsOnly);
-  if (req.exposedProviders) setServerExposedProviders(req.exposedProviders);
+  if (!req.favoritesOnly) {
+    setServerExposedProviders(req.exposedProviders ?? []);
+  }
   setServerMaskGatewayIds(req.maskGatewayIds);
   setServerListenMode(req.listenMode);
   const host = req.listenMode === "network" ? "0.0.0.0" : "127.0.0.1";
@@ -661,7 +670,8 @@ async function handleGetModels(res) {
         freeStatus: m.freeStatus,
         freeLabel: freeStatusLabel(m.freeStatus),
         contextWindow: m.contextWindow,
-        cost: m.cost
+        cost: m.cost,
+        claudeTransparentCompatible: supportsClaudeTransparentMode(m)
       }))
     }));
     const materializedIds = new Set(catalog.map((p2) => p2.id));
@@ -1069,6 +1079,7 @@ async function handleLaunchApp(req, res, opts) {
   try {
     const body = JSON.parse(await readBody(req));
     const { appId, favorites, cwd } = body;
+    const httpProxy = body.httpProxy === true;
     let { providerId, modelId } = body;
     if (!appId) {
       sendJson(res, 400, { error: "Missing appId" });
@@ -1078,6 +1089,14 @@ async function handleLaunchApp(req, res, opts) {
       sendJson(res, 400, { error: `Unknown app: ${appId}` });
       return;
     }
+    if (body.httpProxy !== void 0 && typeof body.httpProxy !== "boolean") {
+      sendJson(res, 400, { error: "httpProxy must be true or false." });
+      return;
+    }
+    if (httpProxy && appId !== "claude") {
+      sendJson(res, 400, { error: "Anthropic + Relay mode is available only for Claude Code CLI." });
+      return;
+    }
     const { installed, path } = detectApp(appId);
     if (!installed || !path) {
       sendJson(res, 400, { error: `App ${appId} is not installed on this system.` });
@@ -1087,7 +1106,23 @@ async function handleLaunchApp(req, res, opts) {
       sendJson(res, 400, { error: "Both providerId and modelId are required to launch a specific Relay model." });
       return;
     }
-    if (favorites && !providerId && !modelId) {
+    if (httpProxy && providerId && modelId) {
+      let catalog;
+      try {
+        catalog = await fetchModelsWithTimeout();
+      } catch (err) {
+        sendCatalogFetchError(res, err, "Model validation");
+        return;
+      }
+      const selectedModel = catalog.find((provider) => provider.id === providerId)?.models.find((model) => model.id === modelId);
+      if (!selectedModel || !supportsClaudeTransparentMode(selectedModel)) {
+        sendJson(res, 400, {
+          error: "The selected model cannot be combined with your Anthropic login."
+        });
+        return;
+      }
+    }
+    if (favorites && !httpProxy && !providerId && !modelId) {
       const prefs = loadPreferences();
       const favList = AGY_APP_IDS.has(appId) ? prefs.antigravityCliFavoriteModels ?? [] : prefs.favoriteModels ?? [];
       if (favList.length > 0) {
@@ -1112,11 +1147,12 @@ async function handleLaunchApp(req, res, opts) {
       providerId,
       modelId,
       cwd: launchFolder,
-      trace: opts.trace
+      trace: opts.trace,
+      httpProxy
     });
     traceUi(
       opts,
-      `launch app=${appId} provider=${providerId ?? ""} model=${modelId ?? ""} favorites=${Boolean(favorites)} resolved-from-favorites=${Boolean(favorites && providerId)} cwd=${launchFolder ?? ""} command=${launchCmd}`
+      `launch app=${appId} provider=${providerId ?? ""} model=${modelId ?? ""} favorites=${Boolean(favorites)} http-proxy=${httpProxy} resolved-from-favorites=${Boolean(favorites && providerId)} cwd=${launchFolder ?? ""} command=${launchCmd}`
     );
     exec(launchCmd, (err) => {
       if (err) {
@@ -1453,4 +1489,4 @@ export {
   resolveUiShutdownDecision,
   runUiCommand
 };
-//# sourceMappingURL=ui-command-2HNQX7U3.js.map
+//# sourceMappingURL=ui-command-P27KHEJG.js.map