feat: storage watchdog — USB disconnect detection, auto-stop, safe eject, auto-reconnect (v0.17.0)

New storage watchdog monitors registered storage paths every 5s. On disconnect
(3 consecutive probe failures), auto-stops affected apps, lazy-unmounts stale
VFS entries, fires alerts/notifications/hub report. On reconnect (UUID detected),
auto-remounts via fstab, cleans stale restic locks, offers app restart.

Safe disconnect UI for USB drives: confirmation dialog, stop apps, sync, unmount.
Disconnected state visible across all pages (dashboard, settings, backups, monitoring)
with hatched red bars and badges. Backup guards skip disconnected drives.

22 files changed (1 new: monitor/watchdog.go), ~1500 lines added.

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

controller/internal/web/templates/backups.html

@@ -38,6 +38,15 @@
                 </div>
             </div>
             {{range $.StorageBars}}
+            {{if .Disconnected}}
+            <div class="storage-item storage-disconnected">
+                <div class="storage-header">
+                    <span class="storage-label">{{.Label}}</span>
+                    <span class="storage-value badge-error" style="font-size:.75rem">Leválasztva</span>
+                </div>
+                <div class="system-bar"><div class="system-bar-disconnected"></div></div>
+            </div>
+            {{else}}
             <div class="storage-item">
                 <div class="storage-header">
                     <span class="storage-label">{{.Label}}</span>
@@ -49,6 +58,7 @@
             </div>
             {{end}}
             {{end}}
+            {{end}}
         </div>
         <div class="storage-stats">
             {{if .Backup.RepoStats}}
@@ -253,7 +263,9 @@
             <span class="status-dot status-{{.Status}}" title="{{.StatusText}}"></span>
             <span class="app-backup-row-name">{{.DisplayName}}</span>
             <div class="app-backup-row-meta">
-                {{if .HasHDDData}}
+                {{if .DriveDisconnected}}
+                    <span class="badge badge-error" style="font-size:.7rem">Meghajtó leválasztva</span>
+                {{else if .HasHDDData}}
                     {{if .StorageLabel}}<span class="meta-badge meta-badge-storage">{{.StorageLabel}}</span>{{end}}
                     <span class="mono app-backup-size" style="font-size:.8rem">{{.HDDSizeHuman}}</span>
                 {{else}}

controller/internal/web/templates/dashboard.html

@@ -66,6 +66,15 @@
             </div>
         </div>
         {{range .StorageBars}}
+        {{if .Disconnected}}
+        <div class="system-info-item storage-disconnected">
+            <div class="system-info-header">
+                <span class="system-info-label">{{.Label}}</span>
+                <span class="system-info-value badge-error" style="font-size:.75rem">Leválasztva</span>
+            </div>
+            <div class="system-bar"><div class="system-bar-disconnected"></div></div>
+        </div>
+        {{else}}
         <div class="system-info-item">
             <div class="system-info-header">
                 <span class="system-info-label">{{.Label}}</span>
@@ -76,6 +85,7 @@
             </div>
         </div>
         {{end}}
+        {{end}}
     </div>
     {{if .DiskWarnings}}
     <div class="inline-warnings">

controller/internal/web/templates/monitoring.html

@@ -51,6 +51,15 @@
             </div>
         </div>
         {{range $.StorageBars}}
+        {{if .Disconnected}}
+        <div class="storage-item storage-disconnected">
+            <div class="storage-header">
+                <span class="storage-label">{{.Label}}</span>
+                <span class="storage-value badge-error" style="font-size:.75rem">Leválasztva</span>
+            </div>
+            <div class="system-bar"><div class="system-bar-disconnected"></div></div>
+        </div>
+        {{else}}
         <div class="storage-item">
             <div class="storage-header">
                 <span class="storage-label">{{.Label}}</span>
@@ -62,6 +71,7 @@
         </div>
         {{end}}
         {{end}}
+        {{end}}
     </div>
     {{if .DiskWarnings}}
     <div class="inline-warnings">

controller/internal/web/templates/settings.html

@@ -205,21 +205,38 @@ function pollUntilBack() {
     {{if .StoragePaths}}
     <div class="storage-paths-list">
         {{range .StoragePaths}}
-        <div class="storage-path-item">
+        <div class="storage-path-item{{if .Disconnected}} storage-disconnected{{end}}">
             <div class="storage-path-header">
                 <div class="storage-path-info">
                     <div class="storage-path-label-wrap" id="label-wrap-{{.Path}}">
                         <span class="storage-path-label" id="label-display-{{.Path}}">{{.Label}}</span>
-                        <button class="btn btn-xs btn-ghost" onclick="editStorageLabel('{{.Path}}', '{{.Label}}')" title="Átnevezés">✏️</button>
+                        {{if not .Disconnected}}<button class="btn btn-xs btn-ghost" onclick="editStorageLabel('{{.Path}}', '{{.Label}}')" title="Átnevezés">✏️</button>{{end}}
                     </div>
                     <span class="storage-path-path mono">{{.Path}}</span>
                 </div>
                 <div class="storage-path-badges">
+                    {{if .Disconnected}}
+                    <span class="badge badge-error">Leválasztva</span>
+                    {{else}}
                     {{if .IsDefault}}<span class="badge state-green">Alapértelmezett</span>{{end}}
                     {{if .Schedulable}}<span class="badge" style="background:rgba(0,136,204,0.15);color:var(--accent-light)">Aktív</span>{{else}}<span class="badge state-gray">Inaktív</span>{{end}}
                     {{if not .IsMounted}}<span class="badge badge-warn">Rendszermeghajtón</span>{{end}}
+                    {{end}}
                 </div>
             </div>
+            {{if .Disconnected}}
+            <div class="storage-path-details">
+                <div class="storage-disconnected-info">
+                    {{if .DisconnectedAt}}<span class="form-hint">Leválasztva: {{.DisconnectedAt}}</span>{{end}}
+                    {{if .StoppedApps}}
+                    <span class="form-hint">Leállított alkalmazások: {{range $i, $name := .StoppedApps}}{{if $i}}, {{end}}{{$name}}{{end}}</span>
+                    {{end}}
+                </div>
+            </div>
+            <div class="storage-path-actions" id="storage-actions-{{.Path}}">
+                <button class="btn btn-xs btn-primary" onclick="storageReconnect('{{.Path}}')">Csatlakoztatás</button>
+            </div>
+            {{else}}
             <div class="storage-path-details">
                 {{if .DiskInfo}}
                 <div class="storage-path-disk">
@@ -237,6 +254,12 @@ function pollUntilBack() {
                     {{.FSInfo.FSType}} · {{.FSInfo.Device}}{{if .FSInfo.Model}} · {{.FSInfo.Model}}{{end}}
                 </div>
                 {{end}}
+                {{if .StoppedApps}}
+                <div class="storage-stopped-apps-info" id="storage-stopped-{{.Path}}">
+                    <span class="form-hint" style="color:var(--accent-light)">Újraindításra váró alkalmazások: {{range $i, $name := .StoppedApps}}{{if $i}}, {{end}}{{$name}}{{end}}</span>
+                    <button class="btn btn-xs btn-primary" onclick="storageRestartApps('{{.Path}}')" style="margin-left:.5rem">Alkalmazások indítása</button>
+                </div>
+                {{end}}
                 <div class="storage-path-meta">
                     {{if .AppDetails}}
                     <details class="storage-app-details">
@@ -278,6 +301,9 @@ function pollUntilBack() {
                     <button type="submit" class="btn btn-xs btn-outline">Engedélyezés</button>
                 </form>
                 {{end}}
+                {{if .IsUSB}}
+                <button class="btn btn-xs btn-danger-outline" onclick="storageDisconnect('{{.Path}}', '{{.Label}}', {{.AppCount}})">Leválasztás</button>
+                {{end}}
                 {{if and (not .IsDefault) (eq .AppCount 0)}}
                 <form method="POST" action="/settings/storage/remove" style="display:inline"
                       onsubmit="return confirm('Biztosan eltávolítja a(z) {{.Path}} adattárolót?')">
@@ -286,6 +312,7 @@ function pollUntilBack() {
                 </form>
                 {{end}}
             </div>
+            {{end}}
         </div>
         {{end}}
     </div>
@@ -420,6 +447,60 @@ function editStorageLabel(path, currentLabel) {
         '</form>';
     wrap.querySelector('input[name=storage_label]').focus();
 }
+function storageDisconnect(path, label, appCount) {
+    var msg = 'Biztos leválasztja a meghajtót: ' + label + '?';
+    if (appCount > 0) msg += '\n\nA rajta futó ' + appCount + ' alkalmazás le fog állni.';
+    msg += '\n\nA meghajtó ezután biztonságosan eltávolítható.';
+    if (!confirm(msg)) return;
+    fetch('/api/storage/disconnect', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({path: path})
+    }).then(function(r) { return r.json(); }).then(function(data) {
+        if (data.ok) {
+            alert('A meghajtó biztonságosan eltávolítható.');
+            location.reload();
+        } else {
+            alert('Hiba: ' + (data.error || 'ismeretlen'));
+        }
+    }).catch(function(e) { alert('Hiba: ' + e); });
+}
+function storageReconnect(path) {
+    var actionsDiv = document.getElementById('storage-actions-' + path);
+    if (actionsDiv) actionsDiv.innerHTML = '<span class="form-hint">Csatlakoztatás...</span>';
+    fetch('/api/storage/reconnect', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({path: path})
+    }).then(function(r) { return r.json(); }).then(function(data) {
+        if (data.ok) {
+            location.reload();
+        } else {
+            alert('Hiba: ' + (data.error || 'ismeretlen'));
+            if (actionsDiv) actionsDiv.innerHTML = '<button class="btn btn-xs btn-primary" onclick="storageReconnect(\'' + path + '\')">Csatlakoztatás</button>';
+        }
+    }).catch(function(e) {
+        alert('Hiba: ' + e);
+        if (actionsDiv) actionsDiv.innerHTML = '<button class="btn btn-xs btn-primary" onclick="storageReconnect(\'' + path + '\')">Csatlakoztatás</button>';
+    });
+}
+function storageRestartApps(path) {
+    fetch('/api/storage/restart-apps', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({path: path})
+    }).then(function(r) { return r.json(); }).then(function(data) {
+        if (data.ok) {
+            var msg = '';
+            if (data.started && data.started.length) msg += 'Elindítva: ' + data.started.join(', ');
+            if (data.failed && data.failed.length) msg += (msg ? '\n' : '') + 'Sikertelen: ' + data.failed.join(', ');
+            if (msg) alert(msg);
+            location.reload();
+        } else {
+            alert('Hiba: ' + (data.error || 'ismeretlen'));
+        }
+    }).catch(function(e) { alert('Hiba: ' + e); });
+}
 function cancelEditLabel(path, label) {
     var wrap = document.getElementById('label-wrap-' + path);
     if (!wrap) return;

controller/internal/web/templates/style.css

@@ -2254,6 +2254,41 @@ a.stat-card:hover {
     background: rgba(250, 204, 21, 0.15);
     color: #facc15;
 }
+.badge-error {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+}
+
+/* Disconnected storage path card */
+.storage-disconnected {
+    opacity: 0.75;
+    border-style: dashed;
+}
+.storage-disconnected .storage-disconnected-info {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+.storage-stopped-apps-info {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .25rem;
+    margin-bottom: .5rem;
+}
+
+/* Disconnected bar on dashboard/monitoring */
+.system-bar-disconnected {
+    background: repeating-linear-gradient(
+        -45deg,
+        rgba(239, 68, 68, 0.15),
+        rgba(239, 68, 68, 0.15) 5px,
+        transparent 5px,
+        transparent 10px
+    );
+    height: 100%;
+    border-radius: 4px;
+}
 
 /* Task progress bar (storage init — not disk usage zone gradient) */
 .progress-bar-task {