llm-tuner 0.4.3 → 0.5.0

package/src/platform/ollama-authorize.js

@@ -0,0 +1,79 @@
+import { spawn } from 'node:child_process';
+import { serviceInvocation } from '../core/engines/ollama-service.js';
+import { TunerError } from '../core/errors.js';
+
+export const authorizationIO = { spawn };
+
+function parseResult(stdout) {
+  const fields = Object.create(null);
+  for (const line of stdout.trimEnd().split('\n')) {
+    const index = line.indexOf('=');
+    const key = line.slice(0, index);
+    if (index < 0 || !['changed', 'restarted', 'backup'].includes(key) || Object.hasOwn(fields, key)) throw new TunerError('errors.ollamaAuthorizationFailed');
+    fields[key] = line.slice(index + 1);
+  }
+  if (!['0', '1'].includes(fields.changed) || !['0', '1'].includes(fields.restarted) || typeof fields.backup !== 'string' || (fields.backup && !/^\/etc\/systemd\/system\/ollama\.service\.d\/llm-tuner\.conf\.bak-llm-tuner-[A-Za-z0-9]+$/.test(fields.backup))) throw new TunerError('errors.ollamaAuthorizationFailed');
+  return { changed: fields.changed === '1', restarted: fields.restarted === '1', backups: fields.backup ? [fields.backup] : [] };
+}
+
+/** The interface chooses interaction, never the operation or its destinations. */
+export function createOllamaAuthorizer({ mode = 'noninteractive', beforePrompt = () => {}, afterPrompt = () => {} } = {}) {
+  if (!['desktop', 'terminal', 'noninteractive'].includes(mode)) throw new TunerError('errors.ollamaServiceConfig');
+  return async (request) => {
+    if (!request || request.operation !== 'ollama-service-env' || Object.keys(request).some((k) => !['operation', 'env'].includes(k))) throw new TunerError('errors.ollamaServiceConfig');
+    const { command, args } = serviceInvocation(request.env);
+    const bin = mode === 'desktop' ? '/usr/bin/pkexec' : '/usr/bin/sudo';
+    const prefix = mode === 'desktop' ? ['--disable-internal-agent'] : mode === 'noninteractive' ? ['-n', '--'] : ['--'];
+    const terminal = mode === 'terminal';
+    try {
+      if (terminal) await beforePrompt();
+      return await new Promise((resolve, reject) => {
+        let child, timer, output = '', settled = false, pendingFailure;
+        const finish = (error, value) => {
+          if (settled) return;
+          settled = true;
+          clearTimeout(timer);
+          if (error) reject(error); else resolve(value);
+        };
+        const failed = () => new TunerError('errors.ollamaAuthorizationFailed');
+        const stop = () => {
+          pendingFailure = failed();
+          // A signal request is not proof of termination. Retain ownership
+          // until close, even if the OS refuses to signal the elevated child.
+          try { child.kill('SIGTERM'); } catch { /* wait for the elevated watchdog */ }
+        };
+        try {
+          child = authorizationIO.spawn(bin, [...prefix, command, ...args], {
+            env: { PATH: '/usr/sbin:/usr/bin:/sbin:/bin', LANG: 'C' },
+            stdio: terminal ? ['inherit', 'pipe', 'inherit'] : ['ignore', 'pipe', 'pipe'],
+          });
+        } catch (e) {
+          finish(new TunerError(e.code === 'ENOENT' ? 'errors.ollamaAuthorizationUnavailable' : 'errors.ollamaAuthorizationFailed'));
+          return;
+        }
+        timer = setTimeout(stop, 60000);
+        child.stdout?.on('data', (chunk) => {
+          if (pendingFailure) return;
+          output += String(chunk);
+          if (Buffer.byteLength(output) > 16384) { output = ''; stop(); }
+        });
+        // Drain diagnostics without collecting passwords or returning raw privileged output.
+        child.stderr?.resume();
+        child.on('error', (e) => {
+          const error = new TunerError(e.code === 'ENOENT' ? 'errors.ollamaAuthorizationUnavailable' : 'errors.ollamaAuthorizationFailed');
+          if (!child.pid) finish(error); else pendingFailure = error;
+        });
+        child.on('close', (code, signal) => {
+          if (pendingFailure) { finish(pendingFailure); return; }
+          if (code !== 0 || signal) {
+            finish(new TunerError(mode === 'desktop' && code === 126 ? 'errors.ollamaAuthorizationCancelled' : mode === 'noninteractive' && code === 1 ? 'errors.ollamaAuthorizationRequired' : 'errors.ollamaAuthorizationFailed'));
+            return;
+          }
+          try { finish(null, parseResult(output)); } catch (e) { finish(e); }
+        });
+      });
+    } finally {
+      if (terminal) await afterPrompt();
+    }
+  };
+}

package/src/platform/server-autostart.js

@@ -0,0 +1,187 @@
+import { randomBytes } from 'node:crypto';
+import fs from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { run as runCommand } from '../core/util.js';
+
+const ENTRY_NAME = 'dev.llm-tuner.server';
+
+function missing(error) {
+  return error?.code === 'ENOENT';
+}
+
+function validConfig(config) {
+  return config && typeof config === 'object' && !Array.isArray(config)
+    && typeof config.host === 'string' && config.host.length > 0
+    && Number.isInteger(config.port) && config.port > 0 && config.port <= 65535
+    && typeof config.token === 'string' && config.token.length > 0;
+}
+
+function desktopArgument(value) {
+  const execEscaped = String(value).replace(/([\\"$`])/g, '\\$1').replace(/%/g, '%%');
+  return `"${execEscaped.replace(/\\/g, '\\\\')}"`;
+}
+
+function assertNoControlCharacters(values) {
+  if (values.some((value) => /[\u0000-\u001f\u007f-\u009f]/u.test(String(value)))) {
+    throw new Error('Startup command paths cannot contain control characters.');
+  }
+}
+
+function xml(value) {
+  return String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function powershellLiteral(value) {
+  return `'${String(value).replace(/'/g, "''")}'`;
+}
+
+function windowsArgument(value) {
+  const text = String(value);
+  if (!/[\s"]/.test(text)) return text;
+  let quoted = '"';
+  let slashes = 0;
+  for (const character of text) {
+    if (character === '\\') {
+      slashes += 1;
+    } else if (character === '"') {
+      quoted += `${'\\'.repeat(slashes * 2 + 1)}"`;
+      slashes = 0;
+    } else {
+      quoted += `${'\\'.repeat(slashes)}${character}`;
+      slashes = 0;
+    }
+  }
+  return `${quoted}${'\\'.repeat(slashes * 2)}"`;
+}
+
+function plist(argumentsList) {
+  const values = argumentsList.map((value) => `    <string>${xml(value)}</string>`).join('\n');
+  return `<?xml version="1.0" encoding="UTF-8"?>\n<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">\n<plist version="1.0">\n<dict>\n  <key>Label</key>\n  <string>${ENTRY_NAME}</string>\n  <key>ProgramArguments</key>\n  <array>\n${values}\n  </array>\n  <key>RunAtLoad</key>\n  <true/>\n</dict>\n</plist>\n`;
+}
+
+export function createServerAutostart({
+  platform = process.platform,
+  home = os.homedir(),
+  env = process.env,
+  execPath = process.execPath,
+  entryPath = fileURLToPath(new URL('../cli/server-login.js', import.meta.url)),
+  configPath,
+  fileSystem = fs,
+  run = runCommand,
+} = {}) {
+  let artifactPath;
+  if (platform === 'linux') {
+    artifactPath = path.join(env.XDG_CONFIG_HOME || path.join(home, '.config'), 'autostart', 'llm-tuner-server.desktop');
+  } else if (platform === 'darwin') {
+    artifactPath = path.join(home, 'Library', 'LaunchAgents', `${ENTRY_NAME}.plist`);
+  } else if (platform === 'win32') {
+    artifactPath = path.join(env.APPDATA || path.join(home, 'AppData', 'Roaming'), 'Microsoft', 'Windows', 'Start Menu', 'Programs', 'Startup', 'LLM Tuner Server.lnk');
+  } else {
+    throw new Error(`Automatic server startup is not supported on ${platform}.`);
+  }
+  const defaultConfigRoot = platform === 'win32'
+    ? (env.APPDATA || path.join(home, 'AppData', 'Roaming'))
+    : platform === 'darwin'
+      ? path.join(home, 'Library', 'Application Support')
+      : (env.XDG_CONFIG_HOME || path.join(home, '.config'));
+  const resolvedConfigPath = configPath || path.join(env.LLM_TUNER_CONFIG_DIR || path.join(defaultConfigRoot, 'llm-tuner'), 'server.json');
+
+  async function ensureConfig() {
+    let contents;
+    try {
+      contents = await fileSystem.readFile(resolvedConfigPath, 'utf8');
+    } catch (error) {
+      if (!missing(error)) throw error;
+      const initial = { host: '0.0.0.0', port: 7860, token: randomBytes(32).toString('hex') };
+      await fileSystem.mkdir(path.dirname(resolvedConfigPath), { recursive: true });
+      try {
+        await fileSystem.writeFile(resolvedConfigPath, JSON.stringify(initial, null, 2), { encoding: 'utf8', mode: 0o600, flag: 'wx' });
+        return initial;
+      } catch (writeError) {
+        if (writeError?.code !== 'EEXIST') throw writeError;
+        contents = await fileSystem.readFile(resolvedConfigPath, 'utf8');
+      }
+    }
+    let config;
+    try {
+      config = JSON.parse(contents);
+    } catch {
+      throw new Error(`Server configuration at ${resolvedConfigPath} is malformed; automatic startup was not registered.`);
+    }
+    if (!validConfig(config)) {
+      throw new Error(`Server configuration at ${resolvedConfigPath} is invalid; automatic startup was not registered.`);
+    }
+    return config;
+  }
+
+  async function register() {
+    const configDirectory = path.dirname(resolvedConfigPath);
+    assertNoControlCharacters([execPath, entryPath, configDirectory, artifactPath]);
+    await ensureConfig();
+    if (platform === 'linux') {
+      const entry = `[Desktop Entry]\nType=Application\nName=LLM Tuner Server\nComment=Start the LLM Tuner server after login\nExec=${desktopArgument(execPath)} ${desktopArgument(entryPath)} --config-dir ${desktopArgument(configDirectory)}\nTerminal=false\n`;
+      await fileSystem.mkdir(path.dirname(artifactPath), { recursive: true });
+      await fileSystem.writeFile(artifactPath, entry, { encoding: 'utf8', mode: 0o600 });
+      if (!(await status())) throw new Error('The Linux startup entry was not created.');
+      return;
+    }
+    if (platform === 'darwin') {
+      await fileSystem.mkdir(path.dirname(artifactPath), { recursive: true });
+      await fileSystem.writeFile(artifactPath, plist([execPath, entryPath, '--config-dir', configDirectory]), { encoding: 'utf8', mode: 0o600 });
+      if (!(await status())) throw new Error('The macOS startup entry was not created.');
+      return;
+    }
+
+    await fileSystem.mkdir(path.dirname(artifactPath), { recursive: true });
+    const args = `--config-dir ${windowsArgument(configDirectory)}`;
+    const script = [
+      `$ErrorActionPreference = 'Stop'`,
+      `$expectedTarget = ${powershellLiteral(execPath)}`,
+      `$expectedArguments = ${powershellLiteral(`${windowsArgument(entryPath)} ${args}`)}`,
+      `$expectedWorkingDirectory = ${powershellLiteral(path.dirname(entryPath))}`,
+      `try {`,
+      `$shell = New-Object -ComObject WScript.Shell`,
+      `$shortcut = $shell.CreateShortcut(${powershellLiteral(artifactPath)})`,
+      `$shortcut.TargetPath = $expectedTarget`,
+      `$shortcut.Arguments = $expectedArguments`,
+      `$shortcut.WorkingDirectory = $expectedWorkingDirectory`,
+      `$shortcut.Save()`,
+      `$saved = $shell.CreateShortcut(${powershellLiteral(artifactPath)})`,
+      `if ($saved.TargetPath -ne $expectedTarget -or $saved.Arguments -ne $expectedArguments -or $saved.WorkingDirectory -ne $expectedWorkingDirectory) { throw 'The saved startup shortcut did not match the requested settings.' }`,
+      `} catch { [Console]::Error.WriteLine($_.Exception.Message); exit 1 }`,
+    ].join('\n');
+    const result = await run('powershell.exe', ['-NoProfile', '-NonInteractive', '-EncodedCommand', Buffer.from(script, 'utf16le').toString('base64')], { windowsHide: true });
+    if (result.code !== 0) throw new Error(`Could not create the Windows startup shortcut: ${result.stderr || `PowerShell exited with code ${result.code}`}`);
+    try {
+      await fileSystem.access(artifactPath);
+    } catch (error) {
+      if (missing(error)) throw new Error('PowerShell reported success but did not create the Windows startup shortcut.');
+      throw error;
+    }
+  }
+
+  async function status() {
+    try {
+      await fileSystem.access(artifactPath);
+      return true;
+    } catch (error) {
+      if (missing(error)) return false;
+      throw error;
+    }
+  }
+
+  return {
+    status,
+    async setEnabled(enabled) {
+      if (typeof enabled !== 'boolean') throw new TypeError('enabled must be a boolean.');
+      if (enabled) {
+        await register();
+      } else {
+        await fileSystem.rm(artifactPath, { force: true });
+      }
+      return status();
+    },
+  };
+}

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(() => {});
+}