v0.2.0 - Always-on services panel with per-service host config

Dashboard:
- New 'Always-on services' section with cards for Parakeet and Magpie
- Each card: host:port, model loaded, status pill (Healthy/Unhealthy/Starting/Not configured)
- Start, Restart, Stop buttons. Buttons disabled when not applicable for current state
- Restart counter shown when > 1 (would have surfaced the old magpie crash loop)

Backend:
- New /api/services GET: docker container state + http health for each support service
- New POST /api/services/{name}/{action} for start | stop | restart
- services.py module: docker_state, run_action via SSH
- config.py: PARAKEET_HOST/USER/CONTAINER and MAGPIE_* env vars, default to spark2_*
- health.py: use per-service hosts (no longer hard-wired to spark2_host)

Package:
- sparkConfig.yaml.ts: add 6 new optional fields
- configureSparks action: optional 'Parakeet host', 'Parakeet container', 'Magpie host', 'Magpie container' fields; descriptions explain they default to Spark 2 when blank
- Handler normalizes nulls to empty strings before merge
- main.ts: pass new env vars to container
- bump to 0.2.0:0

image/app/static/app.js

@@ -11,6 +11,8 @@ const state = {
   swap_phase: 'Starting…',
   swap_phase_detail: '',
   swap_progress: 0,        // 0–1
+  services: {},
+  service_action_in_flight: null,  // e.g. "parakeet:restart"
   configured: true,
   timer_handle: null,
 };
@@ -83,6 +85,107 @@ function renderCurrent(status) {
   c.innerHTML = `<strong>${label}</strong>`;
 }
 
+function classifyService(s) {
+  // returns one of: running | unhealthy | missing | unconfigured | starting
+  if (!s.host) return 'unconfigured';
+  if (s.docker_state === 'missing') return 'missing';
+  if (s.docker_state === 'restarting') return 'unhealthy';
+  if (s.docker_state === 'exited') return 'unhealthy';
+  if (s.docker_state === 'running' && !s.http_ready) return 'starting';
+  if (s.docker_state === 'running' && s.http_ready) return 'running';
+  return s.docker_state || 'unknown';
+}
+
+function statusLabel(cls) {
+  return {
+    running: 'Healthy',
+    unhealthy: 'Unhealthy',
+    starting: 'Starting…',
+    missing: 'Not installed',
+    unconfigured: 'Not configured',
+    unknown: 'Unknown',
+  }[cls] || cls;
+}
+
+async function renderServices() {
+  let services = state.services;
+  // First render: fetch.
+  if (!services || Object.keys(services).length === 0) {
+    try {
+      services = await fetchJSON('/api/services');
+      state.services = services;
+    } catch (e) { console.error('services fetch failed', e); return; }
+  }
+  const panel = el('#services-panel');
+  const grid = el('#services-grid');
+  const entries = Object.entries(services);
+  if (entries.length === 0) { panel.classList.add('hidden'); return; }
+  panel.classList.remove('hidden');
+  grid.innerHTML = '';
+  for (const [name, s] of entries) {
+    const cls = classifyService(s);
+    const card = document.createElement('div');
+    card.className = `service-card ${cls}`;
+    const inFlight = state.service_action_in_flight && state.service_action_in_flight.startsWith(name + ':');
+    const disable = (action) => {
+      // Disable buttons that don't make sense for the current state
+      if (inFlight) return true;
+      if (cls === 'unconfigured' || cls === 'missing') return true;
+      if (action === 'start' && (cls === 'running' || cls === 'starting')) return true;
+      if (action === 'stop' && cls !== 'running' && cls !== 'starting' && cls !== 'unhealthy') return true;
+      return false;
+    };
+    const hostRow = s.host
+      ? `<div class="row"><span class="k">Host</span><span class="v">${escapeHtml(s.host)}:${s.port}</span></div>`
+      : `<div class="row"><span class="k">Host</span><span class="v muted-v">not configured</span></div>`;
+    const modelRow = s.model
+      ? `<div class="row"><span class="k">Model</span><span class="v">${escapeHtml(s.model)}</span></div>`
+      : '';
+    const restartsRow = s.restart_count != null && s.restart_count > 1
+      ? `<div class="row"><span class="k">Restarts</span><span class="v">${s.restart_count}</span></div>`
+      : '';
+    card.innerHTML = `
+      <div class="head">
+        <span class="name">${escapeHtml(name)}</span>
+        <span class="kind">${escapeHtml(s.kind || '')}</span>
+        <span class="status">${statusLabel(cls)}</span>
+      </div>
+      ${hostRow}
+      ${modelRow}
+      ${restartsRow}
+      <div class="service-actions">
+        <button class="btn" data-svc-action="${name}:start" ${disable('start') ? 'disabled' : ''}>Start</button>
+        <button class="btn" data-svc-action="${name}:restart" ${disable('restart') ? 'disabled' : ''}>Restart</button>
+        <button class="btn danger" data-svc-action="${name}:stop" ${disable('stop') ? 'disabled' : ''}>Stop</button>
+      </div>
+    `;
+    grid.appendChild(card);
+  }
+  for (const btn of grid.querySelectorAll('.btn[data-svc-action]')) {
+    btn.addEventListener('click', () => onServiceAction(btn.dataset.svcAction));
+  }
+}
+
+async function onServiceAction(key) {
+  if (state.service_action_in_flight) return;
+  const [name, action] = key.split(':');
+  state.service_action_in_flight = key;
+  renderServices();
+  try {
+    await fetchJSON(`/api/services/${name}/${action}`, { method: 'POST' });
+  } catch (e) {
+    alert(`${action} ${name} failed: ${e.message}`);
+  } finally {
+    state.service_action_in_flight = null;
+    // Refresh services state
+    try {
+      state.services = await fetchJSON('/api/services');
+    } catch {}
+    renderServices();
+    pollStatus();
+  }
+}
+
 function renderEndpoint(status) {
   const v = status.vllm || {};
   const panel = el('#endpoint-panel');
@@ -269,6 +372,11 @@ async function pollStatus() {
     renderCurrent(status);
     renderEndpoint(status);
     renderHealth(status);
+    // Refresh services state lazily — every 5s poll triggers this too.
+    try {
+      state.services = await fetchJSON('/api/services');
+      renderServices();
+    } catch {}
     if (status.current_swap_job && status.current_swap_job !== state.swap_job_id) {
       attachToSwap(status.current_swap_job, /*needsBackfill=*/true);
     } else if (!status.current_swap_job && state.swap_job_id && !state.swap_eventsource) {
@@ -392,6 +500,7 @@ async function init() {
   setupCopyButtons();
   await loadModels();
   await pollStatus();
+  await renderServices();
   setInterval(pollStatus, 5000);
 }