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);
 }
 

image/app/static/index.html

@@ -63,7 +63,15 @@
       </details>
     </section>
 
-    <section id="cards" class="cards"></section>
+    <section id="services-panel" class="services hidden">
+      <h2 class="section-title">Always-on services</h2>
+      <div id="services-grid" class="services-grid"></div>
+    </section>
+
+    <section id="models-section">
+      <h2 class="section-title">LLM swap</h2>
+      <section id="cards" class="cards"></section>
+    </section>
 
     <footer class="footer">
       <div class="health">

image/app/static/style.css

@@ -217,6 +217,79 @@ main {
   word-break: break-word;
 }
 
+/* ===== Section titles ===== */
+
+.section-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--muted);
+  margin: 24px 0 12px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.section-title:first-child { margin-top: 0; }
+
+/* ===== Services panel ===== */
+
+.services-grid {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+
+.service-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.service-card.running { border-color: rgba(74, 222, 128, 0.45); }
+.service-card.unhealthy { border-color: rgba(239, 68, 68, 0.55); }
+.service-card.missing,
+.service-card.unconfigured { border-color: rgba(245, 158, 11, 0.45); }
+.service-card .head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.service-card .head .name { font-weight: 600; font-size: 15px; }
+.service-card .head .kind { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
+.service-card .head .status {
+  margin-left: auto;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  color: var(--muted);
+}
+.service-card.running .status { color: var(--accent); border-color: rgba(74, 222, 128, 0.4); }
+.service-card.unhealthy .status { color: var(--error); border-color: rgba(239, 68, 68, 0.4); }
+.service-card.missing .status,
+.service-card.unconfigured .status { color: var(--warn); border-color: rgba(245, 158, 11, 0.4); }
+
+.service-card .row {
+  display: flex;
+  font-size: 12px;
+  color: var(--muted);
+  gap: 6px;
+}
+.service-card .row .k { width: 60px; flex-shrink: 0; }
+.service-card .row .v { color: var(--text); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; word-break: break-all; }
+.service-card .row .v.muted-v { color: var(--muted); font-family: inherit; }
+
+.service-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 4px;
+}
+.service-actions .btn { padding: 6px 12px; font-size: 12px; flex: 1; }
+.service-actions .btn.danger { color: var(--error); border-color: rgba(239, 68, 68, 0.3); }
+.service-actions .btn.danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.08); border-color: var(--error); }
+
 /* ===== Cards ===== */
 
 .cards {