Nuova tab Registra: cattura audio da ingresso del computer

Aggiunta sezione per registrare in MP3 320 kbps da qualsiasi
dispositivo di input audio del sistema (mixer, scheda audio
esterna, microfono interno, BlackHole / driver virtuali per audio
di sistema).

- core/recorder.py: list_input_devices() parsa l'output di
  ffmpeg -list_devices su AVFoundation (macOS) e DirectShow (Win),
  marca come 'virtual' i driver loopback noti (BlackHole, Soundflower,
  Loopback, VB-Cable, Stereo Mix, OBS). start_recording() lancia
  ffmpeg in thread e emette eventi tick/started/stopped/error.
- api/bridge.py: list_audio_inputs, start_audio_recording,
  stop_audio_recording, is_audio_recording
- webui: hero rosso, dropdown dispositivi con badge 'loopback',
  selettore bitrate, timer HH:MM:SS animato, bottone REC con
  pulse animation, card 'Ultima registrazione' con durata+path
- Hint visibile: per registrare audio di sistema serve BlackHole

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

webui/css/style.css

@@ -34,6 +34,10 @@
   --amber-hover: #FBBF24;
   --amber-dim: #78350F;
 
+  --rec-red: #EF4444;
+  --rec-red-hover: #F87171;
+  --rec-red-dim: #7F1D1D;
+
   --red: #E22134;
   --red-hover: #FF4055;
 
@@ -241,6 +245,10 @@ button, input, select, textarea { font-family: inherit; font-size: inherit; }
   background: linear-gradient(135deg, #F59E0B 0%, #78350F 60%, #3B1E07 100%);
 }
 
+.hero-red {
+  background: linear-gradient(135deg, #DC2626 0%, #7F1D1D 60%, #3F0A0A 100%);
+}
+
 .hero-content { position: relative; z-index: 2; max-width: 70%; }
 
 .hero-eyebrow {
@@ -255,6 +263,7 @@ button, input, select, textarea { font-family: inherit; font-size: inherit; }
 .hero-eyebrow.purple { color: var(--purple); }
 .hero-eyebrow.pink { color: var(--pink-hover); }
 .hero-eyebrow.amber { color: var(--amber-hover); }
+.hero-eyebrow.red { color: var(--rec-red-hover); }
 
 .hero-title {
   font-size: 36px;
@@ -477,6 +486,20 @@ input[type="number"]::-webkit-inner-spin-button {
   color: #000;
 }
 
+.btn-red {
+  background: var(--rec-red);
+  color: #fff;
+}
+
+.btn-red.recording {
+  animation: pulseRed 1.2s ease-in-out infinite;
+}
+
+@keyframes pulseRed {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
+  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
+}
+
 .btn-success {
   background: #00CEC9;
   color: #000;
@@ -926,3 +949,43 @@ input[type="number"]::-webkit-inner-spin-button {
   .form-grid { grid-template-columns: 1fr; }
   .cover-card { grid-template-columns: 1fr; }
 }
+
+/* ===============================
+   RECORDER
+   =============================== */
+.rec-timer {
+  font-family: "SF Mono", Menlo, Consolas, monospace;
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--rec-red-hover);
+  letter-spacing: 1px;
+  margin-left: auto;
+  min-width: 130px;
+  text-align: right;
+}
+
+.rec-status {
+  color: var(--text-2);
+  font-size: 12.5px;
+  font-weight: 600;
+  margin-left: 18px;
+}
+
+.rec-result {
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+  margin-top: 6px;
+  word-break: break-all;
+  user-select: text;
+}
+
+.rec-result .badge-dur {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--rec-red-hover);
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: 11.5px;
+  font-weight: 700;
+  margin-right: 10px;
+}

webui/index.html

@@ -37,6 +37,10 @@
           <span class="nav-icon">🏷</span>
           <span>Metadati</span>
         </button>
+        <button class="nav-item" data-view="record">
+          <span class="nav-icon">●</span>
+          <span>Registra</span>
+        </button>
         <button class="nav-item" data-view="settings">
           <span class="nav-icon">⚙</span>
           <span>Impostazioni</span>
@@ -241,6 +245,78 @@
         </div>
       </section>
 
+      <!-- ===== VIEW: REGISTRA ===== -->
+      <section class="view" id="view-record">
+        <header class="hero hero-red">
+          <div class="hero-content">
+            <div class="hero-eyebrow red">REGISTRAZIONE</div>
+            <h1 class="hero-title">Cattura audio</h1>
+            <p class="hero-subtitle">Registra in MP3 320 kbps da qualsiasi ingresso audio (mixer, scheda, microfono, BlackHole/loopback)</p>
+          </div>
+          <div class="hero-deco">●</div>
+        </header>
+
+        <h2 class="section-label">Dispositivo</h2>
+        <div class="card">
+          <div class="field">
+            <label class="field-label">Ingresso audio</label>
+            <div class="row">
+              <select id="recDevice" class="input pill">
+                <option value="">Caricamento…</option>
+              </select>
+              <button class="btn btn-ghost pill btn-sm" id="recRefreshBtn">↻ Aggiorna</button>
+            </div>
+          </div>
+
+          <div class="hint" id="recHint">
+            <span class="hint-ico">ⓘ</span>
+            Per registrare l'audio di sistema (Spotify/YouTube/ecc.) installa <strong>BlackHole</strong> (gratuito, brew install blackhole-2ch) e poi imposta l'output di sistema su BlackHole.
+          </div>
+        </div>
+
+        <h2 class="section-label">Destinazione</h2>
+        <div class="card">
+          <div class="field">
+            <label class="field-label">Cartella output</label>
+            <div class="row">
+              <div class="path-display" id="recPathDisplay">Nessuna cartella selezionata</div>
+              <button class="btn btn-ghost pill btn-sm" id="recBrowseBtn">Sfoglia</button>
+            </div>
+          </div>
+
+          <div class="field">
+            <label class="field-label">Nome file (opzionale)</label>
+            <input type="text" id="recFilename" class="input pill" placeholder="Registrazione_AAAAMMGG_HHMMSS.mp3" />
+          </div>
+
+          <div class="field inline">
+            <label class="field-label">Bitrate</label>
+            <select id="recBitrate" class="input pill input-sm">
+              <option value="128k">128 kbps</option>
+              <option value="192k">192 kbps</option>
+              <option value="256k">256 kbps</option>
+              <option value="320k" selected>320 kbps</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="card actions">
+          <button class="btn btn-red pill btn-lg" id="recStartBtn">
+            <span class="ico">●</span> REC
+          </button>
+          <button class="btn btn-danger pill btn-lg" id="recStopBtn" disabled>
+            <span class="ico">◼</span> Stop
+          </button>
+          <div class="rec-timer" id="recTimer">00:00:00</div>
+          <div class="rec-status" id="recStatus"></div>
+        </div>
+
+        <div class="card" id="recOutputCard" hidden>
+          <div class="micro-label">Ultima registrazione</div>
+          <div class="rec-result" id="recResult"></div>
+        </div>
+      </section>
+
       <!-- ===== VIEW: METADATI ===== -->
       <section class="view" id="view-meta">
         <header class="hero hero-amber">

webui/js/app.js

@@ -16,6 +16,7 @@ const state = {
   upgrading: false,
   videoDownloading: false,
   meta: { path: "", newCoverPath: "", removeCover: false },
+  rec: { devices: [], outputDir: "", recording: false, seconds: 0 },
 };
 
 // Wait for pywebview ready
@@ -104,8 +105,56 @@ const bridgeHandlers = {
     $("#videoDownloadBtn").disabled = false;
     $("#stopVideoBtn").disabled = true;
   },
+
+  "recording:event": (p) => {
+    const status = p.status;
+    if (status === "started") {
+      state.rec.recording = true;
+      state.rec.seconds = 0;
+      $("#recStartBtn").disabled = true;
+      $("#recStartBtn").classList.add("recording");
+      $("#recStopBtn").disabled = false;
+      $("#recDevice").disabled = true;
+      $("#recRefreshBtn").disabled = true;
+      $("#recTimer").textContent = "00:00:00";
+      $("#recStatus").textContent = "● Registrazione in corso…";
+    } else if (status === "tick") {
+      state.rec.seconds = p.seconds || 0;
+      $("#recTimer").textContent = formatHms(state.rec.seconds);
+    } else if (status === "stopped") {
+      state.rec.recording = false;
+      $("#recStartBtn").disabled = false;
+      $("#recStartBtn").classList.remove("recording");
+      $("#recStopBtn").disabled = true;
+      $("#recDevice").disabled = false;
+      $("#recRefreshBtn").disabled = false;
+      $("#recStatus").textContent = "";
+      $("#recOutputCard").hidden = false;
+      $("#recResult").innerHTML = `
+        <span class="badge-dur">${formatHms(p.seconds || 0)}</span>
+        ${p.output_path || ""}
+      `;
+      toast("Registrazione salvata", "success");
+    } else if (status === "error") {
+      state.rec.recording = false;
+      $("#recStartBtn").disabled = false;
+      $("#recStartBtn").classList.remove("recording");
+      $("#recStopBtn").disabled = true;
+      $("#recDevice").disabled = false;
+      $("#recRefreshBtn").disabled = false;
+      $("#recStatus").textContent = "";
+      toast("Errore registrazione: " + (p.error || ""), "error");
+    }
+  },
 };
 
+function formatHms(sec) {
+  const h = Math.floor(sec / 3600).toString().padStart(2, "0");
+  const m = Math.floor((sec % 3600) / 60).toString().padStart(2, "0");
+  const s = Math.floor(sec % 60).toString().padStart(2, "0");
+  return `${h}:${m}:${s}`;
+}
+
 // ============================================================
 // Logging
 // ============================================================
@@ -196,6 +245,34 @@ async function init() {
 
   // Upgrade tab — default threshold
   $("#upThreshold").value = state.config.hq_threshold || 310;
+
+  // Record tab — default output dir + carica dispositivi
+  state.rec.outputDir = state.config.output_dir || "";
+  if (state.rec.outputDir) {
+    $("#recPathDisplay").textContent = state.rec.outputDir;
+    $("#recPathDisplay").classList.remove("empty");
+  }
+  await refreshRecDevices();
+}
+
+async function refreshRecDevices() {
+  const res = await window.pywebview.api.list_audio_inputs();
+  const select = $("#recDevice");
+  select.innerHTML = "";
+  state.rec.devices = res.devices || [];
+  if (!state.rec.devices.length) {
+    const opt = document.createElement("option");
+    opt.value = "";
+    opt.textContent = "Nessun dispositivo trovato";
+    select.appendChild(opt);
+    return;
+  }
+  for (const d of state.rec.devices) {
+    const opt = document.createElement("option");
+    opt.value = d.id;
+    opt.textContent = d.is_virtual ? `🔄 ${d.name} (loopback)` : d.name;
+    select.appendChild(opt);
+  }
 }
 
 // ============================================================
@@ -392,6 +469,46 @@ $("#stopUpgradeBtn").addEventListener("click", async () => {
   $("#stopUpgradeBtn").disabled = true;
 });
 
+// ============================================================
+// RECORDER tab
+// ============================================================
+$("#recRefreshBtn").addEventListener("click", refreshRecDevices);
+
+$("#recBrowseBtn").addEventListener("click", async () => {
+  const path = await window.pywebview.api.browse_directory();
+  if (path) {
+    state.rec.outputDir = path;
+    $("#recPathDisplay").textContent = path;
+    $("#recPathDisplay").classList.remove("empty");
+  }
+});
+
+$("#recStartBtn").addEventListener("click", async () => {
+  const deviceId = $("#recDevice").value;
+  if (!deviceId) {
+    toast("Seleziona un dispositivo", "error");
+    return;
+  }
+  if (!state.rec.outputDir) {
+    toast("Seleziona una cartella di destinazione", "error");
+    return;
+  }
+  const res = await window.pywebview.api.start_audio_recording({
+    device_id: deviceId,
+    output_dir: state.rec.outputDir,
+    filename: $("#recFilename").value.trim(),
+    bitrate: $("#recBitrate").value,
+  });
+  if (!res.ok) {
+    toast(res.error || "Errore", "error");
+  }
+});
+
+$("#recStopBtn").addEventListener("click", async () => {
+  $("#recStopBtn").disabled = true;
+  await window.pywebview.api.stop_audio_recording();
+});
+
 // ============================================================
 // METADATA editor
 // ============================================================