Add device identity tooltips and MAC validation

src/web/features/devices/DevicesPanel.tsx

@@ -387,6 +387,7 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
             const groupStart = group !== previousGroup;
             const hasName = Boolean(device.alias || device.hostname);
             const title = device.alias || device.hostname || device.ip || 'Неизвестное устройство';
+            const identityTooltipId = `device-identity-${device.id}`;
             const editing = editingId === device.id;
             const saving = savingId === device.id;
             const seen = formatLastSeen(device.lastSeenAt);
@@ -452,7 +453,7 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
               </span>}
 
               <div className="client-device-main">
-                <h4 className={`client-device-name-heading${hasName ? '' : ' is-address-only'}${editing ? ' is-editing' : ''}`}>
+                <h4 className={`client-device-name-heading client-tooltip-anchor${hasName ? '' : ' is-address-only'}${editing ? ' is-editing' : ''}`}>
                   {editing ? (
                     <input
                       className="client-device-alias-input"
@@ -461,6 +462,7 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
                       maxLength={64}
                       autoFocus
                       aria-label="Название устройства"
+                      aria-describedby={identityTooltipId}
                       aria-busy={saving}
                       disabled={saving}
                       onChange={(event) => setAlias(event.target.value)}
@@ -470,9 +472,10 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
                       }}
                     />
                   ) : hasName && <button
-                    className="client-device-alias-trigger"
+                    className={`client-device-alias-trigger${device.alias ? ' is-custom-name' : ''}`}
                     type="button"
                     aria-label={`Изменить название ${title}`}
+                    aria-describedby={identityTooltipId}
                     onClick={() => startEditing(device)}
                   >{title}</button>}
                   {(hasName || (editing && Boolean(alias))) && device.ip && <span className="client-device-name-separator" aria-hidden="true">·</span>}
@@ -480,8 +483,10 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
                     className={`client-device-ip${copied ? feedback.failed ? ' is-copy-error' : ' is-copied' : ''}`}
                     type="button"
                     aria-label={`Скопировать IP ${device.ip} устройства ${title}`}
+                    aria-describedby={identityTooltipId}
                     onClick={() => copyDeviceIp(device)}
                   >{device.ip}</button> : !hasName && !editing && <span>Неизвестное устройство</span>}
+                  <Tooltip id={identityTooltipId}>Hostname: {device.hostname || '—'} · MAC: {device.mac}</Tooltip>
                 </h4>
                 {!hasName && !editing && <span className="client-device-edit-wrap client-tooltip-anchor">
                   <button