Add Synology integration — completes all six planned live integrations

Sixth and final live integration: volume and disk health across the NAS,
read-only per the delivery plan (DSM write actions are riskier and stayed
out of scope). Adapter built against the same discover-then-call pattern
used by hacf-fr/synologydsm-api (the library behind Home Assistant's
Synology integration) since DSM's API paths/versions vary by release and
the user's NAS isn't reachable from here to check directly:
- GET query.cgi?api=SYNO.API.Info&method=query&query=all once per adapter
  instance, to learn the real path/version for SYNO.API.Auth and
  SYNO.Storage.CGI.Storage rather than hardcoding them
- SYNO.API.Auth login (account/passwd/format=sid) for a session id, re-used
  across calls and refreshed on session-related error codes (105/106/119)
- SYNO.Storage.CGI.Storage's `load_info` method, which returns disks,
  volumes, and pools in one call — verified against that library's
  storage.py field mapping (size.total/used, status, smart_status, temp,
  exceed_bad_sector_thr, below_remain_life_thr)

Uses node:https directly (like Proxmox and the cPanel DNS adapter) for an
"allow self-signed certificate" option, since DSM ships one by default.
No 2FA support — login surfaces a clear error if the account requires it
rather than failing silently.

Verified: full build passes. Unreachable from here, so ran an 11-check HTTP
test against the live server: confirms all six integration types are now
registered, role gating, credential (password) non-leakage, disabled-
integration blocking, and the wrong_type crash-safety check — server stays
up throughout. Real volume/disk data still needs verification once this app
can reach the user's NAS.

This completes the integrations phase from the original plan: Tailscale,
Gitea, Dockhand, Semaphore, Proxmox, Synology are all built, each following
the same config-in-UI + encrypted-credentials pattern. Combined with the
foundation, Secrets, IPAM, DNS, and Servers & Tasks modules from earlier,
Homelab Manager now covers every feature area from the user's original
request.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/api/client.ts

@@ -290,6 +290,31 @@ export interface ProxmoxGuestsResponse {
   summary: { total: number; running: number };
 }
 
+export interface SynologyVolume {
+  id: string;
+  status: string;
+  deviceType: string;
+  sizeTotal: number | null;
+  sizeUsed: number | null;
+}
+
+export interface SynologyDisk {
+  id: string;
+  name: string;
+  device: string;
+  status: string;
+  smartStatus: string;
+  temp: number | null;
+  exceedBadSectorThreshold: boolean;
+  belowRemainLifeThreshold: boolean;
+}
+
+export interface SynologyStorageResponse {
+  volumes: SynologyVolume[];
+  disks: SynologyDisk[];
+  summary: { volumeCount: number; volumesNotNormal: number; diskCount: number; disksNotNormal: number };
+}
+
 export class UnauthorizedError extends Error {}
 export class ForbiddenError extends Error {}
 
@@ -505,5 +530,8 @@ export const api = {
       restart: (integrationId: number, node: string, type: ProxmoxGuestType, vmid: number) =>
         request<void>(`/api/integrations/${integrationId}/proxmox/nodes/${node}/${type}/${vmid}/restart`, { method: "POST" }),
     },
+    synology: {
+      storage: (integrationId: number) => request<SynologyStorageResponse>(`/api/integrations/${integrationId}/synology/storage`),
+    },
   },
 };

web/src/pages/Dashboard.tsx

@@ -31,6 +31,12 @@ interface ProxmoxSummary {
   total: number;
 }
 
+interface SynologySummary {
+  volumeCount: number;
+  volumesNotNormal: number;
+  disksNotNormal: number;
+}
+
 export default function Dashboard({ user }: { user: CurrentUser }) {
   const [integrations, setIntegrations] = useState<IntegrationSummary[] | null>(null);
   const [tailscaleSummary, setTailscaleSummary] = useState<TailscaleDevicesResponse["summary"] | null>(null);
@@ -38,6 +44,7 @@ export default function Dashboard({ user }: { user: CurrentUser }) {
   const [dockhandSummary, setDockhandSummary] = useState<DockhandSummary | null>(null);
   const [semaphoreSummary, setSemaphoreSummary] = useState<SemaphoreSummary | null>(null);
   const [proxmoxSummary, setProxmoxSummary] = useState<ProxmoxSummary | null>(null);
+  const [synologySummary, setSynologySummary] = useState<SynologySummary | null>(null);
 
   useEffect(() => {
     api.integrations.list().then((res) => setIntegrations(res.integrations));
@@ -108,6 +115,24 @@ export default function Dashboard({ user }: { user: CurrentUser }) {
       .catch(() => setProxmoxSummary(null));
   }, [integrations]);
 
+  useEffect(() => {
+    const synology = integrations?.find((i) => i.type === "synology" && i.enabled);
+    if (!synology) {
+      setSynologySummary(null);
+      return;
+    }
+    api.integrations.synology
+      .storage(synology.id)
+      .then((res) =>
+        setSynologySummary({
+          volumeCount: res.summary.volumeCount,
+          volumesNotNormal: res.summary.volumesNotNormal,
+          disksNotNormal: res.summary.disksNotNormal,
+        }),
+      )
+      .catch(() => setSynologySummary(null));
+  }, [integrations]);
+
   return (
     <>
       <div className="row row-cards mb-3">
@@ -128,7 +153,8 @@ export default function Dashboard({ user }: { user: CurrentUser }) {
           const isLiveDockhand = type === "dockhand" && integration && dockhandSummary;
           const isLiveSemaphore = type === "semaphore" && integration && semaphoreSummary;
           const isLiveProxmox = type === "proxmox" && integration && proxmoxSummary;
-          const isLive = isLiveTailscale || isLiveGitea || isLiveDockhand || isLiveSemaphore || isLiveProxmox;
+          const isLiveSynology = type === "synology" && integration && synologySummary;
+          const isLive = isLiveTailscale || isLiveGitea || isLiveDockhand || isLiveSemaphore || isLiveProxmox || isLiveSynology;
 
           return (
             <div className="col-sm-6 col-lg-4" key={type}>
@@ -186,6 +212,18 @@ export default function Dashboard({ user }: { user: CurrentUser }) {
                       </div>
                       <div className="text-secondary">VMs/containers running</div>
                     </div>
+                  ) : isLiveSynology ? (
+                    <div className="mt-2">
+                      <div className="h3 mb-0">{synologySummary!.volumeCount}</div>
+                      <div className="text-secondary">volumes</div>
+                      {(synologySummary!.volumesNotNormal > 0 || synologySummary!.disksNotNormal > 0) && (
+                        <div className="text-red small mt-1">
+                          {synologySummary!.volumesNotNormal > 0 && `${synologySummary!.volumesNotNormal} volume(s) unhealthy`}
+                          {synologySummary!.volumesNotNormal > 0 && synologySummary!.disksNotNormal > 0 && ", "}
+                          {synologySummary!.disksNotNormal > 0 && `${synologySummary!.disksNotNormal} disk(s) unhealthy`}
+                        </div>
+                      )}
+                    </div>
                   ) : (
                     <div className="text-secondary mt-2">
                       {integration ? (

web/src/pages/Integrations.tsx

@@ -11,6 +11,7 @@ import {
   type ProxmoxGuestsResponse,
   type SemaphoreTemplate,
   type SemaphoreTemplatesResponse,
+  type SynologyStorageResponse,
   type TailscaleDevice,
   type TailscaleDevicesResponse,
 } from "../api/client";
@@ -24,6 +25,26 @@ function proxmoxStatusBadge(status: string) {
   );
 }
 
+function healthBadge(status: string) {
+  return status === "normal" ? (
+    <span className="badge bg-green-lt text-green">Normal</span>
+  ) : (
+    <span className="badge bg-red-lt text-red">{status}</span>
+  );
+}
+
+function formatBytes(bytes: number | null): string {
+  if (bytes === null) return "—";
+  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  return `${value.toFixed(1)} ${units[unit]}`;
+}
+
 function formatUptime(seconds: number | null): string {
   if (!seconds) return "—";
   const days = Math.floor(seconds / 86400);
@@ -141,6 +162,10 @@ export default function Integrations({ user }: { user: CurrentUser }) {
   const [loadingGuests, setLoadingGuests] = useState(false);
   const [actingOnGuest, setActingOnGuest] = useState<number | null>(null);
 
+  const [synologyData, setSynologyData] = useState<SynologyStorageResponse | null>(null);
+  const [synologyError, setSynologyError] = useState<string | null>(null);
+  const [loadingStorage, setLoadingStorage] = useState(false);
+
   function loadIntegrations() {
     api.integrations
       .list()
@@ -211,9 +236,24 @@ export default function Integrations({ user }: { user: CurrentUser }) {
     } else {
       setProxmoxData(null);
     }
+    if (selected?.type === "synology" && selected.enabled && !managing) {
+      loadSynologyStorage(selected.id);
+    } else {
+      setSynologyData(null);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedId, managing, integrations]);
 
+  function loadSynologyStorage(id: number) {
+    setLoadingStorage(true);
+    setSynologyError(null);
+    api.integrations.synology
+      .storage(id)
+      .then((res) => setSynologyData(res))
+      .catch((err) => setSynologyError(err instanceof Error ? err.message : String(err)))
+      .finally(() => setLoadingStorage(false));
+  }
+
   function loadSemaphoreTemplates(id: number) {
     setLoadingTemplates(true);
     setSemaphoreError(null);
@@ -820,6 +860,99 @@ export default function Integrations({ user }: { user: CurrentUser }) {
                     </table>
                   </div>
                 </div>
+              ) : selected?.type === "synology" ? (
+                <div className="row g-3">
+                  <div className="col-12">
+                    <div className="card">
+                      <div className="card-header">
+                        <h3 className="card-title">Volumes</h3>
+                        <div className="card-actions">
+                          <button
+                            className="btn btn-sm btn-outline-secondary"
+                            onClick={() => loadSynologyStorage(selected.id)}
+                            disabled={loadingStorage}
+                          >
+                            {loadingStorage ? "Refreshing…" : "Refresh"}
+                          </button>
+                        </div>
+                      </div>
+                      {synologyError && <div className="alert alert-danger m-3 mb-0">{synologyError}</div>}
+                      <div className="table-responsive">
+                        <table className="table table-vcenter card-table">
+                          <thead>
+                            <tr>
+                              <th>Volume</th>
+                              <th>Type</th>
+                              <th>Used</th>
+                              <th>Status</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {synologyData?.volumes.map((v) => (
+                              <tr key={v.id}>
+                                <td>{v.id}</td>
+                                <td className="text-secondary">{v.deviceType}</td>
+                                <td className="text-secondary">
+                                  {formatBytes(v.sizeUsed)} / {formatBytes(v.sizeTotal)}
+                                </td>
+                                <td>{healthBadge(v.status)}</td>
+                              </tr>
+                            ))}
+                            {synologyData?.volumes.length === 0 && (
+                              <tr>
+                                <td colSpan={4} className="text-secondary text-center">
+                                  No volumes found.
+                                </td>
+                              </tr>
+                            )}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="col-12">
+                    <div className="card">
+                      <div className="card-header">
+                        <h3 className="card-title">Disks</h3>
+                      </div>
+                      <div className="table-responsive">
+                        <table className="table table-vcenter card-table">
+                          <thead>
+                            <tr>
+                              <th>Disk</th>
+                              <th>Device</th>
+                              <th>Temp</th>
+                              <th>S.M.A.R.T.</th>
+                              <th>Status</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {synologyData?.disks.map((d) => (
+                              <tr key={d.id}>
+                                <td>{d.name}</td>
+                                <td className="text-secondary">{d.device}</td>
+                                <td className="text-secondary">{d.temp !== null ? `${d.temp}°C` : "—"}</td>
+                                <td>{healthBadge(d.smartStatus)}</td>
+                                <td>
+                                  {healthBadge(d.status)}
+                                  {d.exceedBadSectorThreshold && <span className="badge bg-yellow-lt text-yellow ms-1">Bad sectors</span>}
+                                  {d.belowRemainLifeThreshold && <span className="badge bg-yellow-lt text-yellow ms-1">Low life</span>}
+                                </td>
+                              </tr>
+                            ))}
+                            {synologyData?.disks.length === 0 && (
+                              <tr>
+                                <td colSpan={5} className="text-secondary text-center">
+                                  No disks found.
+                                </td>
+                              </tr>
+                            )}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               ) : (
                 <div className="card">
                   <div className="card-body text-secondary">