influx-local-cli 0.1.0

package/web/app.js

@@ -0,0 +1,816 @@
+'use strict';
+
+/* influx-local dashboard — vanilla JS, no dependencies. */
+
+const $ = (sel) => document.querySelector(sel);
+const esc = (s) =>
+  String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+
+let token = localStorage.getItem('influx-local-token') || '';
+let selected = null;
+let current = null; // latest detail of the selected instance
+let opBusy = false;
+let lastOpDone = null;
+let lastInstances = [];
+let catalog = { versions: [], flavors: [] };
+let baseDir = '~/.influx-local/instances';
+
+async function api(path, opts = {}) {
+  const send = (tok) => {
+    const headers = { ...(opts.headers || {}) };
+    if (opts.body) headers['Content-Type'] = 'application/json';
+    if (tok) headers['x-influx-local-token'] = tok;
+    return fetch(path, { ...opts, headers });
+  };
+  let res = await send(token);
+  if (res.status === 401) {
+    if (token) {
+      localStorage.removeItem('influx-local-token');
+      localStorage.removeItem('influx-local-token-asked');
+      token = '';
+    }
+    if (!localStorage.getItem('influx-local-token-asked')) {
+      localStorage.setItem('influx-local-token-asked', '1');
+      const t = window.prompt('This dashboard needs the token it was started with (--token):');
+      if (t) {
+        token = t.trim();
+        localStorage.setItem('influx-local-token', token);
+        res = await send(token);
+      }
+    }
+  }
+  if (res.status === 401) {
+    localStorage.removeItem('influx-local-token-asked');
+    throw new Error('wrong token — reload and enter the token passed to "influx-local web --token"');
+  }
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+  if (data && typeof data.error === 'string' && data.error) throw new Error(data.error);
+  return data;
+}
+
+function chip(state) {
+  const cls = state === 'running' ? 'running' : state === 'port-conflict' || state === 'stale-pid' ? 'conflict' : 'stopped';
+  return `<span class="chip ${cls}">${esc(state)}</span>`;
+}
+
+// --- polling ----------------------------------------------------------------
+
+async function pollState() {
+  try {
+    const state = await api('/api/state');
+    opBusy = !!(state.op && state.op.running);
+    lastInstances = state.instances || [];
+    if (state.baseDir) baseDir = state.baseDir;
+    renderList(state.instances, state.op);
+    renderOp(state.op);
+    if (selected && state.op && state.op.finishedAt !== lastOpDone && !state.op.running) {
+      lastOpDone = state.op.finishedAt;
+      loadDetail(selected); // refresh after any finished op
+    }
+    if (!selected) showOverview();
+  } catch (err) {
+    renderOp({ error: err.message });
+  }
+}
+
+// --- sidebar ----------------------------------------------------------------
+
+function renderList(instances, op) {
+  const list = $('#instance-list');
+  list.innerHTML = '';
+  $('#empty-hint').classList.toggle('hidden', instances.length > 0);
+  for (const inst of instances) {
+    const li = document.createElement('li');
+    const busy = op && op.running && op.instance === inst.name;
+    li.className = selected === inst.name ? 'active' : '';
+    const runBtn = (a, title, label) =>
+      `<button class="rowbtn" data-name="${esc(inst.name)}" data-rowact="${a}" title="${title}" ${busy ? 'disabled' : ''}>${label}</button>`;
+    li.innerHTML = `
+      <div class="row-top">
+        <span class="inst-name" title="Click for details">${esc(inst.name)}</span>
+        ${busy ? '<span class="chip op">op</span>' : chip(inst.state)}
+      </div>
+      <div class="row-bottom">
+        <span class="inst-port">${esc(inst.version)} · ${esc(inst.host)}:${inst.port}</span>
+        <span class="inst-actions">
+          ${runBtn('start', 'Start instance', '▶')}
+          ${runBtn('stop', 'Stop instance', '⏹')}
+          ${runBtn('config', 'Edit config', '⚙')}
+          ${runBtn('destroy', 'Delete instance', '✕')}
+        </span>
+      </div>`;
+    li.dataset.name = inst.name;
+    list.appendChild(li);
+  }
+}
+
+function onRowActionDelegate(e) {
+  const btn = e.target.closest('[data-rowact]');
+  if (btn) {
+    e.stopPropagation();
+    onRowAction(btn.dataset.name, btn.dataset.rowact);
+    return;
+  }
+  const li = e.target.closest('#instance-list li');
+  if (li && li.dataset.name) {
+    e.stopPropagation();
+    select(li.dataset.name);
+  }
+}
+
+async function onRowAction(name, action) {
+  if (action === 'start' || action === 'stop') {
+    if (opBusy) return;
+    try {
+      await api('/api/actions', { method: 'POST', body: JSON.stringify({ instance: name, action, opts: {} }) });
+      renderOp({ running: true, kind: action, instance: name, lines: [] });
+      pollState();
+    } catch (err) {
+      alert(err.message);
+    }
+    return;
+  }
+  if (action === 'config') {
+    selected = name;
+    await loadDetail(name).catch(() => {});
+    openConfigModal();
+    return;
+  }
+  if (action === 'destroy') {
+    selected = name;
+    await loadDetail(name).catch(() => {});
+    openDestroyModal();
+    return;
+  }
+}
+
+async function select(name) {
+  selected = name;
+  const el = document.getElementById('detail');
+  if (el && el.dataset) delete el.dataset.name;
+  renderList(lastInstances, null);
+  loadDetail(name);
+}
+
+// --- detail pane ------------------------------------------------------------
+
+let detailSeq = 0;
+async function loadDetail(name) {
+  const seq = ++detailSeq;
+  const body = $('#detail-body');
+  body.innerHTML = '<p class="detail-empty">Loading…</p>';
+  try {
+    const data = await api(`/api/instances/${encodeURIComponent(name)}`);
+    if (seq !== detailSeq) return; // a newer request won
+    current = data;
+    const el = document.getElementById('detail');
+    if (el) el.dataset.name = data.name;
+  } catch (err) {
+    if (seq !== detailSeq) return;
+    body.innerHTML = `<p class="danger-text">${esc(err.message)}</p>`;
+    return;
+  }
+  renderDetail();
+}
+
+function cards(list) {
+  return list
+    .filter(([, v]) => v != null && v !== '')
+    .map(([k, v]) => `<div class="card"><div class="k">${esc(k)}</div><div class="v">${esc(v)}</div></div>`)
+    .join('');
+}
+
+function qbtn(action, label, opts = '') {
+  return `<button data-act="${action}" ${opts} class="small ${action === 'setup' ? 'primary' : ''}">${label}</button>`;
+}
+
+function quickRow(kind, text, btn) {
+  const icon = kind === 'ok' ? '✓' : kind === 'bad' ? '✗' : kind === 'next' ? '→' : '○';
+  return `<div class="q-row"><span class="q-icon ${kind}">${icon}</span><span class="q-text">${esc(text)}</span>${btn || ''}</div>`;
+}
+
+function renderDetail() {
+  const d = current;
+  if (!d) return;
+  const body = $('#detail-body');
+  const running = d.running;
+  const caps = d.capabilities || {};
+
+  const rows = [];
+  if (running) {
+    rows.push(quickRow('ok', `server running (pid ${d.pid}) — reporting ${d.runningVersion || '?'}`, `${qbtn('restart', 'Restart')} ${qbtn('stop', 'Stop')}`));
+  } else if (d.state === 'port-conflict') {
+    rows.push(quickRow('bad', `port ${d.port} is held by a process this tool does not manage`, ''));
+  } else if (d.state === 'stale-pid') {
+    rows.push(quickRow('bad', 'stale pid file — Start cleans it up automatically', qbtn('start', 'Start')));
+  } else {
+    rows.push(quickRow('next', 'server stopped', qbtn('start', 'Start')));
+  }
+
+  if (d.credsPresent) {
+    rows.push(quickRow('ok', `creds.env present (0600) — ${d.credsFields.join(', ') || 'no fields'}`));
+  } else {
+    rows.push(quickRow(running ? 'bad' : 'next', 'no credentials yet — credentials are created by setup', running ? '' : qbtn('setup', 'Setup')));
+  }
+
+  if (running) {
+    const list = d.measurements;
+    rows.push(
+      quickRow(
+        list && list.length ? 'ok' : 'none',
+        list == null ? 'measurements unavailable' : list.length ? `measurements: ${list.join(', ')}` : 'no measurements yet',
+      ),
+    );
+    if (d.flavor === 'v3') {
+      rows.push(quickRow('none', 'InfluxDB 3 Core cannot rotate its admin token in place (the server refuses a second "_admin" token) — recreate the instance to rotate'));
+    } else {
+      rows.push(quickRow('none', 'rotate rewrites creds.env with fresh secrets and verifies them against the running server', qbtn('rotate', 'Rotate secrets')));
+    }
+  }
+
+  const uris = d.uris || {};
+  const uriRows = [
+    ['Endpoint', uris.endpoint],
+    ['App DSN', uris.appUri],
+    ['Admin DSN', uris.adminUri],
+    ['Public DSN', uris.publicAppUri],
+  ]
+    .filter(([, v]) => v)
+    .map(
+      ([label, value]) => `
+      <div class="uri-row">
+        <span style="min-width:90px;color:var(--muted)">${esc(label)}</span>
+        <span class="u" data-secret>${esc(value)}</span>
+        <button class="small" data-copy="${esc(value)}">copy</button>
+      </div>`,
+    )
+    .join('');
+
+  body.innerHTML = `
+    <h2>${esc(d.name)} <span class="chip role">${esc(d.flavorLabel)}</span></h2>
+    <div class="cards">
+      ${cards([
+        ['State', d.state],
+        ['Pinned version', d.version],
+        ['Running version', d.runningVersion],
+        ['Endpoint', d.endpoint],
+        [d.flavor === 'v2' ? 'Org / bucket' : 'Database', d.flavor === 'v2' ? `${d.org} / ${d.database}` : d.database],
+        ['Measurement', d.measurement],
+        ['Admin user', d.adminUser],
+        ['App user', d.appUser],
+        ['PID', d.pid],
+        ['Data dir', d.dataDir],
+      ])}
+    </div>
+
+    <div class="section">
+      <h3>Status</h3>
+      <div class="quick-rows">${rows.join('')}</div>
+    </div>
+
+    <div class="section">
+      <h3>Actions</h3>
+      <div class="btn-row">
+        <button data-act="setup" class="primary small">Setup / repair</button>
+        <button data-act="start" class="small">Start</button>
+        <button data-act="stop" class="small">Stop</button>
+        <button data-act="restart" class="small">Restart</button>
+        <button data-act="install" class="small">Install toolchain</button>
+        ${d.flavor === 'v3' ? '' : '<button data-act="rotate" class="small">Rotate secrets</button>'}
+        <button data-act="config" class="small">Edit config</button>
+        <button data-act="rename" class="small">Rename</button>
+        <button data-act="clone" class="small">Clone</button>
+        <button data-act="secrets" class="small">Show secrets</button>
+        <button data-act="logs" class="small">View logs</button>
+        <button data-act="destroy" class="small danger">Destroy</button>
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>Connection</h3>
+      ${uriRows || '<p class="hint" style="margin:0">Start the instance to see its DSNs.</p>'}
+      <p class="hint" style="margin:8px 0 0">Secrets are masked; use “Show secrets” to reveal them (they are read from <code>creds.env</code>).</p>
+    </div>
+
+    <div class="section">
+      <h3>Users ${d.flavor === 'v3' ? '(tokens)' : ''}</h3>
+      <div id="users-body" class="hint">Loading…</div>
+      <div class="btn-row" style="margin-top:10px">
+        ${caps.users ? '<button data-act="user-add" class="small">+ Add user</button>' : '<span class="hint">This line has no user management.</span>'}
+      </div>
+    </div>`;
+
+  body.querySelectorAll('[data-act]').forEach((el) => (el.onclick = () => onDetailAction(el.dataset.act)));
+  body.querySelectorAll('[data-copy]').forEach(
+    (el) =>
+      (el.onclick = () => {
+        navigator.clipboard.writeText(el.dataset.copy).then(
+          () => (el.textContent = 'copied'),
+          () => (el.textContent = 'copy failed'),
+        );
+      }),
+  );
+  loadUsers(d.name);
+}
+
+async function loadUsers(name) {
+  const box = $('#users-body');
+  if (!box) return;
+  try {
+    const data = await api(`/api/instances/${encodeURIComponent(name)}/users`);
+    if (!data.users || data.users.length === 0) {
+      box.textContent = 'No users reported.';
+      return;
+    }
+    const rows = data.users
+      .map((u) => {
+        const roles = (u.roles || []).map((r) => `<span class="chip role">${esc(r)}</span>`).join('');
+        const managed = u.builtin ? '<span class="chip builtin">managed</span>' : '';
+        const actions =
+          u.builtin && !u.user.includes('token')
+            ? ''
+            : `<span class="u-actions">
+                 <button class="rowbtn small" data-useact="user-password" data-user="${esc(u.user)}">password</button>
+                 <button class="rowbtn small" data-useact="user-rm" data-user="${esc(u.user)}">delete</button>
+               </span>`;
+        return `<div class="user-row">
+            <span class="u-name">${esc(u.user)}</span>
+            <span class="u-db">@${esc(u.db || '—')}</span>
+            <span class="u-roles">${roles}${managed}</span>
+            ${actions}
+          </div>`;
+      })
+      .join('');
+    const err = data.error ? `<p class="danger-text" style="margin:6px 0 0">${esc(data.error)}</p>` : '';
+    box.innerHTML = rows + err;
+    box.querySelectorAll('[data-useact]').forEach(
+      (el) => (el.onclick = () => onUserAction(el.dataset.useact, el.dataset.user)),
+    );
+  } catch (err) {
+    box.innerHTML = `<p class="danger-text" style="margin:0">${esc(err.message)}</p>`;
+  }
+}
+
+function onUserAction(kind, username) {
+  if (kind === 'user-password') return openUserPasswordModal(username);
+  if (kind === 'user-rm') return runAction('user-rm', { username });
+}
+
+// --- operations -------------------------------------------------------------
+
+async function runAction(action, opts = {}) {
+  if (!current) return;
+  if (opBusy) return alert('another operation is running');
+  try {
+    await api('/api/actions', {
+      method: 'POST',
+      body: JSON.stringify({ instance: current.name, action, opts }),
+    });
+    renderOp({ running: true, kind: action, instance: current.name, lines: [] });
+    pollState();
+  } catch (err) {
+    alert(err.message);
+  }
+}
+
+function onDetailAction(act) {
+  if (!current) return;
+  switch (act) {
+    case 'setup':
+    case 'start':
+    case 'stop':
+    case 'restart':
+    case 'rotate':
+    case 'install':
+      return runAction(act);
+    case 'config':
+      return openConfigModal();
+    case 'rename':
+      return openRenameModal();
+    case 'clone':
+      return openCloneModal();
+    case 'secrets':
+      return openSecrets();
+    case 'logs':
+      return openLogs();
+    case 'destroy':
+      return openDestroyModal();
+    case 'user-add':
+      return openUserAddModal();
+    default:
+      return undefined;
+  }
+}
+
+// --- operation log ----------------------------------------------------------
+
+function renderOp(op) {
+  const pre = $('#op-console');
+  const label = $('#op-state');
+  if (!op || (!op.running && !(op.lines || []).length && !op.error)) {
+    label.textContent = '';
+    label.className = 'op-state';
+    pre.textContent = 'No operation running.';
+    return;
+  }
+  const outLines = [...(op.lines || [])];
+  if (op.error) outLines.push(`✗ Error: ${op.error}`);
+  pre.textContent = outLines.length ? outLines.join('\n') : '…';
+  pre.scrollTop = pre.scrollHeight;
+  if (op.running) {
+    label.textContent = `running: ${op.kind} on ${op.instance}`;
+    label.className = 'op-state running';
+  } else if (op.error) {
+    label.textContent = `failed: ${op.kind} on ${op.instance}`;
+    label.className = 'op-state error';
+  } else {
+    label.textContent = `done: ${op.kind} on ${op.instance}`;
+    label.className = 'op-state done';
+  }
+}
+
+// --- overview ---------------------------------------------------------------
+
+function showOverview() {
+  const body = $('#detail-body');
+  const insts = lastInstances;
+  const runningCount = insts.filter((i) => i.running).length;
+  const head = `
+    <h2>Overview</h2>
+    <div class="cards">
+      ${cards([
+        ['Instances', String(insts.length)],
+        ['Running', `${runningCount} / ${insts.length}`],
+        ['Base dir', baseDir],
+      ])}
+    </div>`;
+  if (insts.length === 0) {
+    body.innerHTML = `${head}
+      <div class="section">
+        <h3>Get started</h3>
+        <p class="hint" style="margin-bottom:10px">No instances yet. Create one and pick the InfluxDB version (1.x InfluxQL, 2.x Flux or 3.x Core) — setup then installs that exact build through mise and provisions it.</p>
+        <div class="btn-row"><button id="ovr-new" class="primary">+ New instance</button></div>
+      </div>`;
+    const b = $('#ovr-new');
+    if (b) b.onclick = () => openNewModal();
+    return;
+  }
+  const rows = insts
+    .map((inst) => {
+      const runBtn = (a, title, label) =>
+        `<button class="rowbtn" data-name="${esc(inst.name)}" data-rowact="${a}" title="${title}">${label}</button>`;
+      return `<div class="ov-row">
+      <span class="inst-name" data-open="${esc(inst.name)}">${esc(inst.name)}</span>
+      <span class="ov-meta">${esc(inst.version)} · ${esc(inst.host)}:${inst.port}</span>
+      ${chip(inst.state)}
+      <span class="ov-actions">${runBtn('start', 'Start', '▶')} ${runBtn('stop', 'Stop', '⏹')} ${runBtn('config', 'Config', '⚙')} ${runBtn('destroy', 'Delete', '✕')}</span>
+    </div>`;
+    })
+    .join('');
+  body.innerHTML = `${head}
+    <div class="section"><h3>Instances — click a name for details</h3><div class="ov-list">${rows}</div></div>
+    <div class="section">
+      <h3>Notes</h3>
+      <p class="hint" style="margin:0">• Pin a different InfluxDB version per instance; changing the line (1.x/2.x/3.x) needs a fresh instance. · <b>Setup / repair</b> fixes a broken auth state without losing data. · 1.x keeps an admin user + a database-scoped app user; 2.x keeps an operator user + a bucket-scoped app token; 3.x keeps a single admin token.</p>
+    </div>`;
+  body.querySelectorAll('[data-open]').forEach((el) => (el.onclick = () => select(el.dataset.open)));
+}
+
+// --- modals -----------------------------------------------------------------
+
+function closeModal(id) {
+  const el = document.getElementById(id);
+  if (el && el.open) el.close();
+}
+
+function openViewer(title, html) {
+  $('#viewer-title').textContent = title;
+  $('#viewer-body').innerHTML = html;
+  const dlg = $('#modal-viewer');
+  if (!dlg.open) dlg.showModal();
+}
+
+async function openSecrets() {
+  try {
+    const data = await api(`/api/instances/${encodeURIComponent(current.name)}/secrets`);
+    const creds = Object.entries(data.creds)
+      .map(
+        ([k, v]) =>
+          `<div class="uri-row"><span style="min-width:120px;color:var(--muted)">${esc(k)}</span><span class="u">${esc(v)}</span></div>`,
+      )
+      .join('');
+    const uris = Object.entries(data.uris || {})
+      .filter(([k]) => k !== 'endpoint' && k !== 'masked')
+      .map(
+        ([k, v]) =>
+          `<div class="uri-row"><span style="min-width:120px;color:var(--muted)">${esc(k)}</span><span class="u">${esc(v)}</span></div>`,
+      )
+      .join('');
+    openViewer(
+      `Secrets of ${current.name}`,
+      `${creds}${uris ? `<hr style="border:0;border-top:1px solid var(--border);margin:10px 0">${uris}` : ''}
+       <p class="hint">Read from <code>creds.env</code> (mode 0600).</p>`,
+    );
+  } catch (err) {
+    alert(err.message);
+  }
+}
+
+async function openLogs() {
+  try {
+    const data = await api(`/api/instances/${encodeURIComponent(current.name)}/logs?lines=300`);
+    openViewer(
+      `Logs of ${current.name}`,
+      data.missing
+        ? '<p class="hint">No log file yet — the server has never been started.</p>'
+        : `<pre class="console" style="height:340px">${esc(data.text)}</pre><p class="hint">${esc(data.logPath)}</p>`,
+    );
+  } catch (err) {
+    alert(err.message);
+  }
+}
+
+function openSimpleModal({ title, fields, single, onSubmit }) {
+  $('#simple-title').textContent = title;
+  const wrap = $('#simple-fields');
+  wrap.className = single ? 'single' : '';
+  wrap.innerHTML = fields
+    .map((f) => {
+      if (f.type === 'html') return f.html;
+      const label = f.label ? `<label>${esc(f.label)}${f.input || `<input name="${esc(f.name)}" value="${esc(f.value == null ? '' : f.value)}" ${f.type ? `type="${esc(f.type)}"` : ''} placeholder="${esc(f.placeholder || '')}" ${f.attrs || ''} />`}</label>` : '';
+      return label;
+    })
+    .join('');
+  const form = $('#form-simple');
+  form.onsubmit = async (e) => {
+    if (e.submitter && e.submitter.value === 'cancel') return;
+    const values = {};
+    for (const f of fields) {
+      if (!f.name) continue;
+      const el = wrap.querySelector(`[name="${f.name}"]`);
+      if (el) values[f.name] = el.value;
+    }
+    try {
+      await onSubmit(values);
+      closeModal('modal-simple');
+    } catch (err) {
+      alert(err.message);
+    }
+  };
+  const dlg = $('#modal-simple');
+  if (!dlg.open) dlg.showModal();
+}
+
+function openRenameModal() {
+  openSimpleModal({
+    title: `Rename ${current.name} (must be stopped)`,
+    single: true,
+    fields: [{ name: 'newName', label: 'New name', placeholder: 'new_name' }],
+    onSubmit: async (v) => {
+      await api(`/api/instances/${encodeURIComponent(current.name)}/rename`, {
+        method: 'POST',
+        body: JSON.stringify({ newName: v.newName }),
+      });
+      selected = v.newName;
+      await pollState();
+      await loadDetail(v.newName);
+    },
+  });
+}
+
+function openCloneModal() {
+  openSimpleModal({
+    title: `Clone ${current.name}`,
+    fields: [
+      { name: 'name', label: 'Clone name', placeholder: 'copy_of_' + current.name },
+      { name: 'port', label: 'Port (blank = next free)', type: 'number' },
+    ],
+    onSubmit: async (v) => {
+      await api(`/api/instances/${encodeURIComponent(current.name)}/clone`, {
+        method: 'POST',
+        body: JSON.stringify({ name: v.name, port: v.port }),
+      });
+      await pollState();
+    },
+  });
+}
+
+function openUserPasswordModal(username) {
+  openSimpleModal({
+    title: `Set password for ${username}`,
+    single: true,
+    fields: [{ name: 'password', label: 'New password (min 6 chars)', type: 'password' }],
+    onSubmit: (v) => runAction('user-password', { username, password: v.password }),
+  });
+}
+
+function openUserAddModal() {
+  const v1 = current.flavor === 'v1';
+  openSimpleModal({
+    title: `Add user to ${current.name}`,
+    fields: [
+      { name: 'username', label: 'Username' },
+      { name: 'password', label: 'Password (min 6 chars)', type: 'password' },
+      ...(v1
+        ? [
+            { name: 'db', label: 'Target (admin or ' + current.database + ')', value: current.database },
+            { name: 'privileges', label: 'Privileges (read,write,all)', value: 'all' },
+          ]
+        : []),
+    ],
+    onSubmit: (v) =>
+      runAction('user-add', {
+        username: v.username,
+        password: v.password,
+        db: v.db,
+        privileges: v.privileges ? v.privileges.split(',').map((s) => s.trim()).filter(Boolean) : undefined,
+      }),
+  });
+}
+
+function openConfigModal() {
+  const c = current;
+  const flavors = new Map(catalog.flavors.map((f) => [f.id, f]));
+  const options = catalog.versions
+    .map(
+      (v) =>
+        `<option value="${esc(v.version)}" ${v.version === c.version ? 'selected' : ''}>${esc(v.version)} — ${esc(v.label)}${v.default ? ' (default)' : ''}</option>`,
+    )
+    .join('');
+  const caps = c.capabilities || {};
+  openSimpleModal({
+    title: `Edit config — ${c.name}`,
+    fields: [
+      { name: 'version', label: 'InfluxDB version (pin)', input: `<select name="version">${options}</select>` },
+      { name: 'port', label: 'Port', type: 'number', value: c.config.port },
+      { name: 'host', label: 'Host / bind IP', value: c.config.host },
+      { name: 'database', label: c.flavor === 'v2' ? 'Bucket' : 'Database', value: c.config.database },
+      ...(caps.measurement ? [{ name: 'measurement', label: 'Sample measurement', value: c.config.measurement }] : []),
+      ...(c.flavor === 'v2' ? [{ name: 'org', label: 'Organization', value: c.config.org }] : []),
+      ...(c.flavor !== 'v3' ? [{ name: 'adminUser', label: 'Admin user', value: c.config.adminUser }] : []),
+      ...(c.flavor === 'v1' ? [{ name: 'appUser', label: 'App user', value: c.config.appUser }] : []),
+      { name: 'publicHost', label: 'Public host (for public DSNs)', value: c.config.publicHost, placeholder: '(none)' },
+      { type: 'html', html: `<p class="hint">Changing the line (1.x/2.x/3.x) requires an instance without data. Restart after saving.</p>` },
+    ],
+    onSubmit: async (v) => {
+      await api(`/api/instances/${encodeURIComponent(c.name)}/config`, {
+        method: 'PUT',
+        body: JSON.stringify(v),
+      });
+      await loadDetail(c.name).catch(() => {});
+      await pollState();
+    },
+  });
+}
+
+function openDestroyModal() {
+  $('#destroy-instance').textContent = current.name;
+  const input = $('#destroy-confirm');
+  const go = $('#btn-destroy-go');
+  input.value = '';
+  go.disabled = true;
+  input.oninput = () => (go.disabled = input.value !== current.name);
+  go.onclick = async () => {
+    closeModal('modal-destroy');
+    if (opBusy) return alert('another operation is running');
+    try {
+      await api(`/api/instances/${encodeURIComponent(current.name)}/destroy`, { method: 'DELETE' });
+      selected = null;
+      current = null;
+      await pollState();
+      showOverview();
+    } catch (err) {
+      alert(err.message);
+    }
+  };
+  const dlg = $('#modal-destroy');
+  if (!dlg.open) dlg.showModal();
+}
+
+// --- new instance modal -----------------------------------------------------
+
+function renderVersionSelect() {
+  const select = $('#new-version');
+  const groups = new Map();
+  for (const v of catalog.versions) {
+    if (!groups.has(v.flavor)) groups.set(v.flavor, []);
+    groups.get(v.flavor).push(v);
+  }
+  select.innerHTML = [...groups.entries()]
+    .map(
+      ([flavorId, list]) =>
+        `<optgroup label="${esc(list[0].label)}">${list
+          .map((v) => `<option value="${esc(v.version)}" ${v.default ? 'selected' : ''}>${esc(v.version)}${v.default ? ' — default' : ''}</option>`)
+          .join('')}</optgroup>`,
+    )
+    .join('');
+  onVersionChange();
+}
+
+function versionEntry(version) {
+  return catalog.versions.find((v) => v.version === version) || null;
+}
+
+function onVersionChange() {
+  const entry = versionEntry($('#new-version').value);
+  const hint = $('#new-version-hint');
+  if (!entry) {
+    hint.textContent = '';
+    return;
+  }
+  const flavor = catalog.flavors.find((f) => f.id === entry.flavor) || {};
+  hint.innerHTML = `${esc(entry.label)} — auth: <b>${esc(entry.auth)}</b>, default port ${esc(entry.defaultPort)}. ` +
+    (entry.flavor === 'v1'
+      ? 'Admin user with ALL PRIVILEGES + app user scoped to the database.'
+      : entry.flavor === 'v2'
+        ? 'Operator user + all-access token, plus a bucket-scoped app token.'
+        : 'A single admin token (no per-database scoping).');
+  $('#new-port').value = entry.defaultPort;
+  const caps = flavor.capabilities || {};
+  $('#new-measurement-wrap').classList.toggle('hidden', !caps.measurement);
+  $('#new-org-wrap').classList.toggle('hidden', entry.flavor !== 'v2');
+  $('#new-adminuser-wrap').classList.toggle('hidden', entry.flavor === 'v3');
+  $('#new-appuser-wrap').classList.toggle('hidden', entry.flavor !== 'v1');
+  $('#new-adminpw-wrap').classList.toggle('hidden', entry.flavor === 'v3');
+  $('#new-apppw-wrap').classList.toggle('hidden', entry.flavor !== 'v1');
+  $('#new-creds-hint').innerHTML =
+    entry.flavor === 'v3'
+      ? 'InfluxDB 3 Core has no users — the server mints an admin token during <code>setup</code>.'
+      : 'Leave a password empty to auto-generate it (stored in <code>creds.env</code>, mode 0600).';
+}
+
+function openNewModal() {
+  const form = $('#form-new');
+  form.reset();
+  renderVersionSelect();
+  const dlg = $('#modal-new');
+  if (!dlg.open) dlg.showModal();
+}
+
+// --- wiring -----------------------------------------------------------------
+
+function ensureConsoleOpen() {
+  const wrap = document.querySelector('.console-wrap');
+  if (wrap && wrap.classList.contains('collapsed')) {
+    localStorage.removeItem('influx-local-console-collapsed');
+    wrap.classList.remove('collapsed');
+    $('#btn-console-toggle').textContent = '−';
+  }
+}
+
+function wire() {
+  $('#btn-refresh').onclick = () => pollState();
+  $('#btn-new').onclick = () => openNewModal();
+  $('#new-version').onchange = () => onVersionChange();
+  $('#instance-list').addEventListener('click', onRowActionDelegate);
+  $('#btn-console-toggle').onclick = () => {
+    const wrap = document.querySelector('.console-wrap');
+    const collapsed = wrap.classList.toggle('collapsed');
+    $('#btn-console-toggle').textContent = collapsed ? '+' : '−';
+    localStorage.setItem('influx-local-console-collapsed', collapsed ? '1' : '');
+  };
+  if (localStorage.getItem('influx-local-console-collapsed')) {
+    document.querySelector('.console-wrap').classList.add('collapsed');
+    $('#btn-console-toggle').textContent = '+';
+  }
+
+  $('#btn-simple-cancel').onclick = () => closeModal('modal-simple');
+  $('#btn-new-cancel').onclick = () => closeModal('modal-new');
+  $('#btn-viewer-close').onclick = () => closeModal('modal-viewer');
+  $('#btn-destroy-cancel').onclick = () => closeModal('modal-destroy');
+
+  $('#form-new').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (e.submitter && e.submitter.value === 'cancel') return closeModal('modal-new');
+    const form = new FormData($('#form-new'));
+    const body = Object.fromEntries(form.entries());
+    try {
+      await api('/api/instances', { method: 'POST', body: JSON.stringify(body) });
+      closeModal('modal-new');
+      await pollState();
+      await select(body.name);
+    } catch (err) {
+      alert(err.message);
+    }
+  });
+
+  document.querySelectorAll('[data-eye]').forEach(
+    (btn) =>
+      (btn.onclick = () => {
+        const input = $('#form-new').querySelector(`[name="${btn.dataset.eye}"]`);
+        if (input) input.type = input.type === 'password' ? 'text' : 'password';
+      }),
+  );
+}
+
+(async function main() {
+  wire();
+  try {
+    catalog = await api('/api/versions');
+  } catch (err) {
+    console.error('failed to load the version catalog', err);
+  }
+  await pollState();
+  setInterval(pollState, 2000);
+})();