llm-tuner 0.4.4 → 0.5.0

package/src/web/public/app.js

@@ -1,3 +1,4 @@
+import { setupServerSettings } from './server-settings.js';
 import { format } from '/i18n/core.js';
 import { initialProfile, profileOptions, profileDetailLines, profileEventLines, presetsFor, presetFor, isCurrentModel, isCurrentPlan } from './profile.js';
 
@@ -235,15 +236,35 @@ async function openMcpModal(engine) {
   if (title) title.textContent = t('web.mcpModalTitle', { engine: engine.name });
   if (nameInput) nameInput.value = engine.id === 'lmstudio' ? 'lmstudio' : 'ollama';
 
+  const activeSrv = (state.settings?.servers || []).find((x) => x.id === state.settings?.activeServerId);
+  const isRemote = Boolean(activeSrv && activeSrv.id !== 'local' && activeSrv.url);
+  let remoteHost = null;
+  if (isRemote) {
+    try {
+      const hostname = new URL(activeSrv.url).hostname;
+      if (hostname && hostname !== '127.0.0.1' && hostname !== 'localhost') {
+        remoteHost = engine.id === 'lmstudio' ? `http://${hostname}:1234/v1` : `http://${hostname}:11434`;
+      }
+    } catch {}
+  }
+
   if (engine.id === 'lmstudio') {
-    if (hostInput) hostInput.placeholder = 'http://127.0.0.1:1234/v1';
+    const defaultHost = remoteHost || 'http://127.0.0.1:1234/v1';
+    if (hostInput) {
+      hostInput.placeholder = defaultHost;
+      hostInput.value = remoteHost || '';
+    }
     if (apiKeyGroup) apiKeyGroup.hidden = false;
     if (apiKeyInput) {
       apiKeyInput.value = '';
       apiKeyInput.placeholder = 'sk-lm-local';
     }
   } else {
-    if (hostInput) hostInput.placeholder = 'http://127.0.0.1:11434';
+    const defaultHost = remoteHost || 'http://127.0.0.1:11434';
+    if (hostInput) {
+      hostInput.placeholder = defaultHost;
+      hostInput.value = remoteHost || '';
+    }
     if (apiKeyGroup) apiKeyGroup.hidden = true;
     if (apiKeyInput) apiKeyInput.value = '';
   }
@@ -285,11 +306,13 @@ function updateMcpAgentsList() {
 
 async function boot() {
   const s = await api('/api/settings');
+  state.settings = s;
   applyTheme(s.theme);
   ({ messages } = await api(`/api/i18n/${s.lang}`));
   document.documentElement.lang = s.lang;
   applyStatic();
   setupDrawer();
+  await setupServerSettings({ document, bridge: window.llmTunerServer, t });
   setupMcpModal();
   api('/api/update').then((up) => {
     if (up?.currentVersion) {
@@ -337,6 +360,128 @@ async function boot() {
       alert(t('common.error', { message: err.message }));
     }
   };
+
+  function renderServerList() {
+    const sel = $('#server-select');
+    if (!sel) return;
+    sel.innerHTML = '';
+    (s.servers || []).forEach((srv) => {
+      const opt = document.createElement('option');
+      opt.value = srv.id;
+      opt.textContent = `${srv.name} (${srv.url})`;
+      if (srv.id === s.activeServerId) opt.selected = true;
+      sel.appendChild(opt);
+    });
+    const active = (s.servers || []).find((x) => x.id === s.activeServerId) || s.servers?.[0];
+    if (active) {
+      const urlSpan = $('#active-server-url');
+      if (urlSpan) urlSpan.textContent = active.url;
+      const removeBtn = $('#remove-server-btn');
+      if (removeBtn) removeBtn.hidden = (active.id === 'local');
+    }
+  }
+  renderServerList();
+
+  const serverSel = $('#server-select');
+  if (serverSel) {
+    serverSel.onchange = async () => {
+      const nextId = serverSel.value;
+      setBusy(true);
+      try {
+        await api('/api/settings', { activeServerId: nextId });
+        location.reload();
+      } catch (err) {
+        setBusy(false);
+        alert(t('common.error', { message: err.message }));
+      }
+    };
+  }
+
+  const removeServerBtn = $('#remove-server-btn');
+  if (removeServerBtn) {
+    removeServerBtn.onclick = async () => {
+      const activeId = s.activeServerId;
+      if (activeId === 'local') return;
+      const nextServers = (s.servers || []).filter((x) => x.id !== activeId);
+      setBusy(true);
+      try {
+        await api('/api/settings', { servers: nextServers, activeServerId: 'local' });
+        location.reload();
+      } catch (err) {
+        setBusy(false);
+        alert(t('common.error', { message: err.message }));
+      }
+    };
+  }
+
+  const serverModal = $('#server-modal');
+  const serverBackdrop = $('#server-backdrop');
+  function closeServerModal() {
+    if (serverModal) {
+      serverModal.hidden = true;
+      serverModal.close?.();
+    }
+    if (serverBackdrop) serverBackdrop.hidden = true;
+    $('#server-form')?.reset();
+    const fb = $('#server-test-feedback');
+    if (fb) fb.hidden = true;
+  }
+  function openServerModal() {
+    if (serverModal) {
+      serverModal.hidden = false;
+      serverModal.showModal?.();
+    }
+    if (serverBackdrop) serverBackdrop.hidden = false;
+  }
+
+  const addServerBtn = $('#add-server-btn');
+  if (addServerBtn) addServerBtn.onclick = openServerModal;
+  const serverModalClose = $('#server-modal-close');
+  if (serverModalClose) serverModalClose.onclick = closeServerModal;
+  if (serverBackdrop) serverBackdrop.onclick = closeServerModal;
+
+  const serverTestBtn = $('#server-test-btn');
+  if (serverTestBtn) {
+    serverTestBtn.onclick = async () => {
+      const url = $('#new-server-url').value.trim().replace(/\/+$/, '');
+      const token = $('#new-server-token').value.trim();
+      const fb = $('#server-test-feedback');
+      if (!fb) return;
+      fb.hidden = false;
+      fb.textContent = 'Connecting...';
+      try {
+        const headers = token ? { Authorization: `Bearer ${token}` } : {};
+        const res = await fetch(`${url}/api/state`, { headers });
+        if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        fb.textContent = t('web.serverConnected');
+        fb.style.color = 'var(--c-accent, green)';
+      } catch (err) {
+        fb.textContent = t('web.serverConnectionFailed', { error: err.message });
+        fb.style.color = 'var(--c-err, red)';
+      }
+    };
+  }
+
+  const serverForm = $('#server-form');
+  if (serverForm) {
+    serverForm.onsubmit = async (e) => {
+      e.preventDefault();
+      const name = $('#new-server-name').value.trim();
+      const url = $('#new-server-url').value.trim().replace(/\/+$/, '');
+      const token = $('#new-server-token').value.trim() || null;
+      const newServer = { id: 'srv_' + Date.now(), name, url, token };
+      const nextServers = [...(s.servers || []), newServer];
+      setBusy(true);
+      try {
+        await api('/api/settings', { servers: nextServers, activeServerId: newServer.id });
+        location.reload();
+      } catch (err) {
+        setBusy(false);
+        alert(t('common.error', { message: err.message }));
+      }
+    };
+  }
+
   await init();
 }
 
@@ -346,7 +491,8 @@ async function init() {
   state.hw = s.hw;
   state.engines = s.engines;
   setBusy(s.busy);
-  $('#hw-mini').innerHTML = `<div>${esc(s.hw.cpu.brand)}</div><div>${gb(s.hw.ram.totalBytes)} RAM</div>` +
+  const cpuTitle = s.hw?.cpu?.brand || (s.hw?.cpu?.physicalCores ? `${s.hw.cpu.physicalCores} cores` : 'CPU');
+  $('#hw-mini').innerHTML = `<div>${esc(cpuTitle)}</div><div>${gb(s.hw.ram.totalBytes)} RAM</div>` +
     (s.hw.gpus.length ? s.hw.gpus.map((g) => `<div>GPU${g.index} ${esc(g.name.replace(/^NVIDIA GeForce /, ''))} · ${gb(g.totalBytes)}${g.pcieGen ? ` · PCIe ${g.pcieGen}.0 x${g.pcieWidth}` : ''}</div>`).join('') : `<div>${esc(t('web.noGpu'))}</div>`);
   $('#engine-reason').textContent = t(s.reasonCode, s.reasonParams);
   const box = $('#engines');

package/src/web/public/index.html

@@ -145,6 +145,37 @@
         <option value="dark" data-i18n="web.themeDark">Dark</option>
       </select>
     </div>
+    <div class="drawer-field servers-section">
+      <label for="server-select" data-i18n="web.servers">Servers</label>
+      <div class="server-control-row" style="display:flex;gap:8px;margin-bottom:8px;">
+        <select id="server-select" style="flex:1;"></select>
+        <button id="add-server-btn" type="button" class="btn btn-sm" data-i18n="web.addServer">+ Add</button>
+      </div>
+      <div id="server-item-info" class="small muted" style="display:flex;justify-content:space-between;align-items:center;">
+        <span id="active-server-url"></span>
+        <button id="remove-server-btn" type="button" class="btn btn-danger-sm" data-i18n="web.removeServer" style="padding:2px 8px;font-size:11px;" hidden>Remove</button>
+      </div>
+    </div>
+<section id="local-server-settings" class="drawer-field" hidden>
+    <h3 data-i18n="web.localServerSettings">Local Server Settings</h3>
+
+    <label for="local-server-autostart" data-i18n="web.serverAutostartLabel">Server Autostart</label>
+    <select id="local-server-autostart" disabled>
+        <option value="enabled" data-i18n="cli.enabled">Enabled</option>
+        <option value="disabled" data-i18n="cli.disabled">Disabled</option>
+    </select>
+    <p id="local-server-status" class="small muted" aria-live="polite"></p>
+
+    <label for="server-token" data-i18n="web.serverTokenLabel">Server Token</label>
+    <div class="token-container">
+        <input id="server-token" type="password" readonly autocomplete="off" spellcheck="false" value="">
+        <button type="button" id="server-token-reveal" class="btn btn-sm" data-i18n="web.serverTokenReveal">Reveal</button>
+        <button type="button" id="server-token-copy" class="btn btn-sm" data-i18n="web.serverTokenCopy">Copy</button>
+    </div>
+
+    <p id="server-connection-info" class="small muted"></p>
+    <p id="local-server-feedback" class="small" aria-live="polite" role="status"></p>
+</section>
     <div class="drawer-field version-info">
       <span class="muted" id="version-display"></span>
       <div id="update-badge" hidden>
@@ -186,6 +217,32 @@
     <p id="mcp-status" class="mcp-status" hidden></p>
   </form>
 </dialog>
+<div id="server-backdrop" class="modal-backdrop" hidden></div>
+<dialog id="server-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="server-modal-title" hidden>
+  <div class="modal-header">
+    <h3 id="server-modal-title" data-i18n="web.addServerModalTitle">Add Remote Server</h3>
+    <button id="server-modal-close" class="modal-close" type="button" aria-label="Close">✕</button>
+  </div>
+  <form id="server-form" class="modal-body">
+    <div class="field">
+      <label for="new-server-name" data-i18n="web.serverName">Server Name</label>
+      <input id="new-server-name" type="text" required placeholder="e.g. Remote GPU Box">
+    </div>
+    <div class="field">
+      <label for="new-server-url" data-i18n="web.serverUrl">Server URL</label>
+      <input id="new-server-url" type="url" required placeholder="http://192.168.1.100:7860">
+    </div>
+    <div class="field">
+      <label for="new-server-token" data-i18n="web.serverToken">Authentication Token</label>
+      <input id="new-server-token" type="password" placeholder="Bearer Token">
+    </div>
+    <div style="display:flex;gap:8px;align-items:center;margin-top:12px;">
+      <button id="server-test-btn" type="button" class="btn" data-i18n="web.testConnection">Test Connection</button>
+      <button id="server-save-btn" type="submit" class="btn prio" data-i18n="web.saveServer">Save Server</button>
+    </div>
+    <div id="server-test-feedback" class="small muted" style="margin-top:8px;" hidden></div>
+  </form>
+</dialog>
 <script src="app.js" type="module"></script>
 </body>
 </html>

package/src/web/public/server-settings.js

@@ -0,0 +1,127 @@
+export async function setupServerSettings({ document, bridge, t }) {
+  if (!bridge) return;
+
+  const root = document.getElementById('local-server-settings');
+  const autostart = document.getElementById('local-server-autostart');
+  const status = document.getElementById('local-server-status');
+  const feedback = document.getElementById('local-server-feedback');
+  const token = document.getElementById('server-token');
+  const revealBtn = document.getElementById('server-token-reveal');
+  const copyBtn = document.getElementById('server-token-copy');
+  const info = document.getElementById('server-connection-info');
+  const closeBtn = document.getElementById('settings-close');
+  const backdrop = document.getElementById('settings-backdrop');
+  const openBtn = document.getElementById('settings-open');
+
+  root.hidden = false;
+  token.value = '';
+  token.type = 'password';
+
+  let confirmedState = null;
+  let isBusy = false;
+  let generation = 0;
+
+  const updateStatusUI = (enabled, unknown = false) => {
+    if (unknown) {
+      status.textContent = t('web.serverStartupUnknown');
+    } else {
+      status.textContent = enabled ? t('web.serverStartupEnabled') : t('web.serverStartupDisabled');
+      autostart.value = enabled ? 'enabled' : 'disabled';
+    }
+  };
+
+  const refreshStatus = async () => {
+    if (isBusy) return;
+    isBusy = true;
+    try {
+      const enabled = await bridge.getAutostartStatus();
+      confirmedState = enabled;
+      updateStatusUI(enabled);
+      autostart.disabled = false;
+    } catch (e) {
+      updateStatusUI(null, true);
+      autostart.disabled = true;
+      feedback.textContent = e.message;
+    } finally {
+      isBusy = false;
+    }
+  };
+
+  autostart.addEventListener('change', async () => {
+    if (isBusy) return;
+    const wanted = autostart.value === 'enabled';
+    isBusy = true;
+    autostart.disabled = true;
+    try {
+      const result = await bridge.setAutostartEnabled(wanted);
+      if (result !== wanted) throw new Error(t('web.serverStartupUnconfirmed'));
+      confirmedState = wanted;
+      updateStatusUI(wanted);
+      feedback.textContent = t('web.serverStartupSaved');
+    } catch (e) {
+      if (confirmedState !== null) {
+        updateStatusUI(confirmedState);
+        autostart.value = confirmedState ? 'enabled' : 'disabled';
+      }
+      feedback.textContent = e.message;
+    } finally {
+      isBusy = false;
+      if (confirmedState !== null) autostart.disabled = false;
+    }
+  });
+
+  revealBtn.addEventListener('click', async () => {
+    feedback.textContent = '';
+    if (token.value !== '') {
+      token.value = '';
+      token.type = 'password';
+      info.textContent = '';
+      revealBtn.textContent = t('web.serverTokenReveal');
+      return;
+    }
+
+    const currentGen = generation;
+    try {
+      const res = await bridge.revealConnection();
+      if (currentGen !== generation) return;
+
+      if (!res.configured) {
+        token.value = '';
+        feedback.textContent = t('web.serverNoConfig');
+      } else {
+        token.value = res.token;
+        token.type = 'text';
+        revealBtn.textContent = t('web.serverTokenHide');
+        info.textContent = t('web.serverConnectionInfo', { host: res.host, port: res.port });
+      }
+    } catch (e) {
+      if (currentGen === generation) feedback.textContent = e.message;
+    }
+  });
+
+  copyBtn.addEventListener('click', async () => {
+    feedback.textContent = '';
+    try {
+      const res = await bridge.copyToken();
+      if (res?.copied !== true) throw new Error(t('web.serverTokenCopyFailed'));
+      feedback.textContent = t('web.serverTokenCopied');
+    } catch (e) {
+      feedback.textContent = e.message;
+    }
+  });
+
+  const close = () => {
+    generation++;
+    token.value = '';
+    token.type = 'password';
+    info.textContent = '';
+    revealBtn.textContent = t('web.serverTokenReveal');
+  };
+
+  closeBtn.addEventListener('click', close);
+  backdrop.addEventListener('click', close);
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
+  openBtn.addEventListener('click', refreshStatus);
+
+  await refreshStatus().catch(() => {});
+}

package/src/web/server.js

@@ -2,12 +2,72 @@ import http from 'node:http';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import { randomUUID } from 'node:crypto';
-import { detectHardware, detectEngines, Tuner, ENGINES, installPlans, runInstall, slim, listPresets, readSettings, writeSettings, TunerError, PROFILES, checkUpdate, detectAgents, installMcpServer } from '../core/index.js';
+import { randomUUID, timingSafeEqual } from 'node:crypto';
+import { detectHardware, detectEngines, Tuner, ENGINES, installPlans, runInstall, slim, listPresets, readSettings, writeSettings, TunerError, PROFILES, checkUpdate, detectAgents, installMcpServer, resolveConnectableHost } from '../core/index.js';
 import { THEMES } from '../core/settings.js';
 import { LOCALES, messagesFor } from '../i18n/index.js';
 import { openUrl } from '../core/installer.js';
 
+export function sanitizeHardware(hw) {
+  if (!hw || typeof hw !== 'object') return hw;
+  return {
+    os: {
+      platform: hw.os?.platform,
+      arch: hw.os?.arch,
+    },
+    cpu: {
+      physicalCores: hw.cpu?.physicalCores,
+      threads: hw.cpu?.threads,
+      avx2: hw.cpu?.avx2,
+    },
+    gpus: (hw.gpus || []).map((gpu) => ({
+      vendor: gpu.vendor,
+      backend: gpu.backend,
+      index: gpu.index,
+      name: gpu.name,
+      totalBytes: gpu.totalBytes,
+      usedBytes: gpu.usedBytes,
+      freeBytes: gpu.freeBytes,
+      bandwidthGBps: gpu.bandwidthGBps,
+      displayAttached: gpu.displayAttached,
+      unifiedMemory: gpu.unifiedMemory,
+    })),
+    ram: {
+      totalBytes: hw.ram?.totalBytes,
+      availableBytes: hw.ram?.availableBytes,
+    },
+    ramBandwidthGBps: hw.ramBandwidthGBps,
+  };
+}
+
+export function isLoopback(ip) {
+  return ['127.0.0.1', '::1', '::ffff:127.0.0.1'].includes(ip);
+}
+
+export function verifyToken(req, expectedToken) {
+  const ip = req.socket?.remoteAddress;
+  const loopback = isLoopback(ip);
+
+  if (expectedToken === null || expectedToken === undefined) {
+    return loopback;
+  }
+
+  const authHeader = req.headers?.['authorization'];
+  if (!authHeader || !authHeader.startsWith('Bearer ')) {
+    return false;
+  }
+
+  const token = authHeader.slice(7);
+  const tokenBuf = Buffer.from(token);
+  const expectedBuf = Buffer.from(expectedToken);
+
+  if (tokenBuf.length !== expectedBuf.length) {
+    return false;
+  }
+
+  return timingSafeEqual(tokenBuf, expectedBuf);
+}
+
 const PUBLIC = path.join(path.dirname(fileURLToPath(import.meta.url)), 'public');
 const MIME = { '.html': 'text/html; charset=utf-8', '.js': 'text/javascript; charset=utf-8', '.css': 'text/css; charset=utf-8', '.svg': 'image/svg+xml' };
 const I18N_CORE = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'i18n', 'core.js');
@@ -45,7 +105,12 @@ async function body(req) {
 }
 
 function send(res, status, obj) {
-  res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8' });
+  res.writeHead(status, {
+    'Content-Type': 'application/json; charset=utf-8',
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+    'Access-Control-Allow-Headers': 'Authorization, Content-Type',
+  });
   res.end(JSON.stringify(obj));
 }
 
@@ -56,7 +121,9 @@ const routes = {
 
   'POST /api/settings': async (req) => {
     const payload = await body(req);
-    if (payload?.lang === undefined && payload?.theme === undefined && payload?.profile === undefined) throw new TunerError('errors.unknownLocale', { lang: '', list: LOCALES.join(', ') });
+    if (payload?.lang === undefined && payload?.theme === undefined && payload?.profile === undefined && payload?.servers === undefined && payload?.activeServerId === undefined) {
+      throw new TunerError('errors.unknownLocale', { lang: '', list: LOCALES.join(', ') });
+    }
     const patch = {};
     if (payload.lang !== undefined) {
       if (!LOCALES.includes(payload.lang)) throw new TunerError('errors.unknownLocale', { lang: String(payload.lang ?? ''), list: LOCALES.join(', ') });
@@ -67,13 +134,16 @@ const routes = {
       patch.theme = payload.theme;
     }
     if (payload.profile !== undefined) patch.profile = knownProfile(payload.profile);
+    if (payload.servers !== undefined) patch.servers = payload.servers;
+    if (payload.activeServerId !== undefined) patch.activeServerId = payload.activeServerId;
     return { ...(await writeSettings(patch)), locales: LOCALES, themes: THEMES, profiles: PROFILES };
   },
 
-  'GET /api/state': async () => {
+  'GET /api/state': async (req, url, options) => {
     const hw = await detectHardware();
     const engines = await detectEngines(hw);
-    return { hw, ...engines, busy };
+    const safeHw = (options?.isRemote || options?.serverMode) ? sanitizeHardware(hw) : hw;
+    return { hw: safeHw, ...engines, busy };
   },
 
   'GET /api/install-plans': async (req, url) => ({ plans: await installPlans(url.searchParams.get('engine')) }),
@@ -164,17 +234,131 @@ const routes = {
 };
 
 
-async function handler(req, res, options) {
+export async function getActiveRemoteServer({ options } = {}) {
+  if (options?.serverMode === true) {
+    return null;
+  }
+
+  const settings = await readSettings().catch(() => null);
+  if (!settings || !settings.activeServerId || settings.activeServerId === 'local') {
+    return null;
+  }
+
+  const server = settings.servers?.find((s) => s.id === settings.activeServerId);
+  return (server && server.url) ? server : null;
+}
+
+export async function proxyToRemote(remoteServer, req, url, res) {
+  const targetUrl = `${remoteServer.url.replace(/\/+$/, '')}${url.pathname}${url.search}`;
+  const headers = {
+    'Content-Type': req.headers['content-type'] || 'application/json',
+  };
+
+  if (remoteServer.token) {
+    headers['Authorization'] = `Bearer ${remoteServer.token}`;
+  }
+
+  let body = null;
+  if (req.method !== 'GET' && req.method !== 'HEAD') {
+    const chunks = [];
+    for await (const chunk of req) {
+      chunks.push(chunk);
+    }
+    body = Buffer.concat(chunks);
+  }
+
+  try {
+    const remoteRes = await fetch(targetUrl, {
+      method: req.method,
+      headers,
+      body: body && body.length > 0 ? body : undefined,
+    });
+
+    const data = await remoteRes.json().catch(() => ({}));
+    return send(res, remoteRes.status, data);
+  } catch (err) {
+    return send(res, 502, { error: err.message, code: 'web.serverConnectionFailed' });
+  }
+}
+
+async function handler(req, res, options = {}) {
   const url = new URL(req.url, 'http://localhost');
   try {
+    if (req.method === 'OPTIONS') {
+      res.writeHead(204, {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+        'Access-Control-Allow-Headers': 'Authorization, Content-Type',
+        'Access-Control-Max-Age': '86400',
+      });
+      return res.end();
+    }
+
+    const ip = req.socket?.remoteAddress;
+    const loopback = isLoopback(ip);
+    const isRemote = !loopback || !!options.serverMode;
+
+    if (options.token || isRemote) {
+      if (!verifyToken(req, options.token)) {
+        return send(res, 401, { error: 'Unauthorized', code: 'errors.unauthorized' });
+      }
+    }
+
+    if (isRemote && req.method === 'POST' && url.pathname === '/api/install') {
+      return send(res, 403, { error: 'Forbidden', code: 'errors.forbiddenRemote' });
+    }
+
     // A foreign website must not trigger the desktop's privileged authorizer.
     if (options.authorizeOllama && req.method === 'POST' && req.headers.origin && req.headers.origin !== `http://127.0.0.1:${req.socket.localPort}`) return send(res, 403, { error: 'Forbidden origin' });
+
+    const activeRemote = await getActiveRemoteServer({ options });
+    if (activeRemote) {
+      const ev = url.pathname.match(/^\/api\/jobs\/([\w-]+)\/events$/);
+      if (ev) {
+        try {
+          const targetUrl = `${activeRemote.url.replace(/\/+$/, '')}${url.pathname}${url.search}`;
+          const headers = {};
+          if (activeRemote.token) {
+            headers['Authorization'] = `Bearer ${activeRemote.token}`;
+          }
+
+          const remoteRes = await fetch(targetUrl, { method: 'GET', headers });
+          res.writeHead(remoteRes.status, {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            Connection: 'keep-alive',
+            'Access-Control-Allow-Origin': '*',
+          });
+
+          const reader = remoteRes.body.getReader();
+          req.on('close', () => reader.cancel().catch(() => {}));
+          try {
+            while (true) {
+              const { done, value } = await reader.read();
+              if (done) break;
+              res.write(value);
+            }
+          } finally {
+            res.end();
+          }
+          return;
+        } catch (err) {
+          return send(res, 502, { error: err.message, code: 'web.serverConnectionFailed' });
+        }
+      }
+
+      const PROXIED_PATHS = ['/api/state', '/api/models', '/api/plan', '/api/presets', '/api/load', '/api/chat'];
+      if (PROXIED_PATHS.includes(url.pathname)) {
+        return await proxyToRemote(activeRemote, req, url, res);
+      }
+    }
+
     // Server-Sent Events for job progress.
     const ev = url.pathname.match(/^\/api\/jobs\/([\w-]+)\/events$/);
     if (ev) {
       const job = jobs.get(ev[1]);
       if (!job) return send(res, 404, { error: 'job not found' });
-      res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', Connection: 'keep-alive' });
+      res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', Connection: 'keep-alive', 'Access-Control-Allow-Origin': '*' });
       const write = (e) => res.write(`data: ${JSON.stringify(e)}\n\n`);
       job.events.forEach(write);
       if (job.done) return res.end();
@@ -184,7 +368,7 @@ async function handler(req, res, options) {
       return;
     }
     const route = routes[`${req.method} ${url.pathname}`];
-    if (route) return send(res, 200, await route(req, url, options));
+    if (route) return send(res, 200, await route(req, url, { ...options, isRemote }));
 
     const i18n = url.pathname.match(/^\/api\/i18n\/([\w-]+)$/);
     if (i18n && req.method === 'GET') {
@@ -210,16 +394,19 @@ async function handler(req, res, options) {
   }
 }
 
-/** Start the local UI server (bound to localhost only). */
-export function startServer({ port = Number(process.env.PORT) || 7860, open = false, authorizeOllama } = {}) {
+/** Start the local or remote server. */
+export function startServer({ port = Number(process.env.PORT) || 7860, host = '127.0.0.1', token = null, serverMode = false, open = false, authorizeOllama } = {}) {
   return new Promise((resolve, reject) => {
-    const server = http.createServer((req, res) => handler(req, res, { authorizeOllama }));
+    const server = http.createServer((req, res) => handler(req, res, { authorizeOllama, token, serverMode, host }));
     server.on('error', reject);
-    server.listen(port, '127.0.0.1', () => {
-      const url = `http://127.0.0.1:${server.address().port}`;
+    server.listen(port, host, () => {
+      const addr = server.address();
+      const resolvedPort = typeof addr === 'string' ? addr : addr.port;
+      const connectableHost = resolveConnectableHost(host);
+      const url = `http://${connectableHost}:${resolvedPort}`;
       console.log(`LLM Tuner available at ${url}`);
       if (open) openUrl(url);
-      resolve({ server, url });
+      resolve({ server, url, port: resolvedPort });
     });
   });
 }