feat: web UI + HTTP server + Electron shell

- serve.go: embedded web UI (embed.FS), REST API endpoints for search, list, download (SSE progress), and WAV extraction - main.go: added serve subcommand and flag registration - web/ui: vanilla JS frontend with search cards, download queue, extract controls; dark theme, zero dependencies - electron/: Electron wrapper that spawns fetch serve as sidecar, reads port from stdout, creates BrowserWindow; electron-builder config for macOS .app bundle with akaiutil + script as resources Refs #1, #9
2026-06-21 19:46:26 -07:00
parent 815d43ee97
commit e2dbb66525
8 changed files with 982 additions and 1 deletions
@@ -0,0 +1,206 @@
+// AKAI Utils — Web UI
+const API = '/api';
+
+let eventSource = null;
+
+// ─── Search ────────────────────────────────────────────────────────
+
+document.getElementById('search-btn').addEventListener('click', doSearch);
+document.getElementById('search-query').addEventListener('keydown', e => {
+  if (e.key === 'Enter') doSearch();
+});
+document.getElementById('search-dl-all').addEventListener('click', downloadTop10);
+
+async function doSearch() {
+  const q = document.getElementById('search-query').value;
+  const filter = document.getElementById('search-filter').value;
+  const status = document.getElementById('search-status');
+  const results = document.getElementById('search-results');
+
+  status.textContent = 'Searching...';
+  results.innerHTML = '';
+
+  try {
+    const params = new URLSearchParams();
+    if (q) params.set('q', q);
+    if (filter) params.set('filter', filter);
+    params.set('limit', '50');
+
+    const resp = await fetch(`${API}/search?${params}`);
+    const data = await resp.json();
+    status.textContent = `Found ${data.length} items`;
+    renderResults(data);
+  } catch (e) {
+    status.textContent = 'Search failed: ' + e.message;
+  }
+}
+
+function renderResults(items) {
+  const container = document.getElementById('search-results');
+  container.innerHTML = items.map(r => `
+    <div class="result-card">
+      <div class="title">${esc(r.title)}</div>
+      <div class="meta">
+        <span>${r.identifier}</span>
+        <span>${r.downloads.toLocaleString()} downloads</span>
+      </div>
+      <div class="actions">
+        <button class="btn-dl" onclick="downloadItem('${esc(r.identifier)}')">Download ISOs</button>
+        <button class="btn-list" onclick="listItem('${esc(r.identifier)}')">List Files</button>
+      </div>
+      <div id="list-${sanitize(r.identifier)}" class="file-list"></div>
+    </div>
+  `).join('');
+}
+
+async function downloadTop10() {
+  const q = document.getElementById('search-query').value;
+  const filter = document.getElementById('search-filter').value;
+  const params = new URLSearchParams();
+  if (q) params.set('q', q);
+  if (filter) params.set('filter', filter);
+  params.set('limit', '10');
+
+  try {
+    const resp = await fetch(`${API}/search?${params}`);
+    const data = await resp.json();
+    for (const item of data) {
+      await downloadItem(item.identifier);
+    }
+  } catch (e) {
+    alert('Bulk download failed: ' + e.message);
+  }
+}
+
+// ─── List ──────────────────────────────────────────────────────────
+
+async function listItem(identifier) {
+  const el = document.getElementById('list-' + sanitize(identifier));
+  el.innerHTML = 'Loading...';
+
+  try {
+    const resp = await fetch(`${API}/list?identifier=${encodeURIComponent(identifier)}`);
+    const files = await resp.json();
+    if (!Array.isArray(files) || files.length === 0) {
+      el.innerHTML = '<span class="no-files">No ISO files</span>';
+      return;
+    }
+    el.innerHTML = files.map(f =>
+      `<div class="file-row">${esc(f.name)} <span class="file-size">${f.size || '?'}</span></div>`
+    ).join('');
+  } catch (e) {
+    el.innerHTML = 'Failed: ' + e.message;
+  }
+}
+
+// ─── Download ──────────────────────────────────────────────────────
+
+async function downloadItem(identifier) {
+  try {
+    const resp = await fetch(`${API}/download?identifier=${encodeURIComponent(identifier)}&dir=./output/isos`);
+    const data = await resp.json();
+    if (data.error) {
+      alert(data.error);
+      return;
+    }
+    startProgressStream();
+  } catch (e) {
+    alert('Download failed: ' + e.message);
+  }
+}
+
+function startProgressStream() {
+  if (eventSource) eventSource.close();
+  eventSource = new EventSource(`${API}/progress`);
+
+  eventSource.onmessage = function(e) {
+    const jobs = JSON.parse(e.data);
+    renderDownloadQueue(jobs);
+
+    const allDone = Object.values(jobs).every(j => j.done || j.error);
+    if (allDone && Object.keys(jobs).length > 0) {
+      eventSource.close();
+      eventSource = null;
+    }
+  };
+
+  eventSource.onerror = function() {
+    if (eventSource) {
+      eventSource.close();
+      eventSource = null;
+    }
+  };
+}
+
+function renderDownloadQueue(jobs) {
+  const container = document.getElementById('download-queue');
+  const count = document.getElementById('dl-count');
+  const entries = Object.values(jobs);
+  count.textContent = `(${entries.length})`;
+
+  container.innerHTML = entries.map(j => {
+    const pct = j.total_size > 0 ? Math.round(j.downloaded / j.total_size * 100) : 0;
+    let cls = '';
+    if (j.error) cls = 'error';
+    else if (j.done) cls = 'done';
+
+    let info = '';
+    if (j.error) info = j.error;
+    else if (j.done) info = formatBytes(j.total_size) + ' — complete';
+    else info = formatBytes(j.downloaded) + ' / ' + formatBytes(j.total_size) +
+                (j.speed > 0 ? ' — ' + formatBytes(j.speed) + '/s' : '');
+
+    return `
+      <div class="dl-item">
+        <div class="dl-name">${esc(j.file_name)}</div>
+        <div class="dl-bar"><div class="dl-bar-fill ${cls}" style="width:${pct}%"></div></div>
+        <div class="dl-info"><span>${info}</span><span>${j.done && !j.error ? '✓' : pct + '%'}</span></div>
+      </div>`;
+  }).join('');
+}
+
+// ─── Extract ───────────────────────────────────────────────────────
+
+document.getElementById('extract-btn').addEventListener('click', doExtract);
+
+async function doExtract() {
+  const isoDir = document.getElementById('extract-iso-dir').value;
+  const wavDir = document.getElementById('extract-wav-dir').value;
+  const status = document.getElementById('extract-status');
+
+  status.textContent = 'Extracting... (check server console for output)';
+  status.style.color = 'var(--yellow)';
+
+  try {
+    const resp = await fetch(`${API}/extract?dir=${encodeURIComponent(isoDir)}&out=${encodeURIComponent(wavDir)}`);
+    const data = await resp.json();
+    status.textContent = data.message || 'Extraction complete';
+    status.style.color = 'var(--green)';
+  } catch (e) {
+    status.textContent = 'Extraction failed: ' + e.message;
+    status.style.color = 'var(--accent)';
+  }
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────
+
+function esc(s) {
+  if (!s) return '';
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+function sanitize(s) {
+  return s.replace(/[^a-zA-Z0-9_-]/g, '_');
+}
+
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}
+
+// Initial load
+doSearch();